Kendo Scheduler不显示数据

时间:2013-10-09 19:28:36

标签: javascript jquery kendo-ui kendo-scheduler

我可能只是遗漏了一些东西,但我正在尝试使用提供的数据对象填充kendo调度程序。首先加载我的数据对象,然后加载并初始化kendo调度程序。请注意,除了加载初始数据集之外,一切都在调度程序上工作。贝娄是我的数据:

var _data = [{
    eventID: 7,
    title: "Physical therapy.",
    start: new Date("2013/06/12 13:00"),
    end: new Date("2013/06/12 14:30"),
    pending:true,
    recurrenceRule: "",
    recurrenceException: "",
    description: "Take my mom to her physical therapy.",
    isAllDay:false,
    ownTimeSlot:true,
    careAssistantId: 5,
    clientId: 6
},{
    eventID: 8,
    title: "Group meeting.",
    start: new Date("2013/06/13 12:00"),
    end: new Date("2013/06/13 13:30"),
    pending:false,
    recurrenceRule: "",
    recurrenceException: "",
    description: "Take my brother to his group meeting.",
    isAllDay:false,
    ownTimeSlot:true,
    careAssistantId: 5,
    clientId: 6
},{
    eventID: 9,
    title: "Make dinner.",
    start: new Date("2013/06/13 18:00"),
    end: new Date("2013/06/13 20:30"),
    pending:true,
    recurrenceRule: "FREQ=DAILY;INTERVAL=2;COUNT=8",
    recurrenceException: "",
    description: "Make dinner for my mom.",
    isAllDay:false,
    ownTimeSlot:true,
    careAssistantId: 5,
    clientId: 6
}, ]; 

_data是我脚本中的一个全局变量,所以我不确定这是否会导致kendo出现问题。下一部分代码在我的_data变量之后加载。

$("#scheduler").kendoScheduler({
    date: new Date(_startDate),    // Change this to current date with twig
    startTime: new Date(_startTime), // Change this to 12:00 AM of current date
    allDaySlot: true,
    edit: function(e) {
        editScheduler(e);
    },
    moveStart: function(e) {
        moveStartScheduler(e);
    },
    navigate: function(e) {
        navigateScheduler(e);
    },
    remove: function(e) {
        removeScheduler(e);
    },
    resize: function(e) {
        resizeScheduler(e);
    },
    resizeEnd: function(e) {
        resizeEndScheduler(e);
    },
    move: function(e) {
        moveScheduler(e);
    },
    moveEnd: function(e) {
        moveEndScheduler(e);
    },
    add: function(e) {
        addScheduler(e);
    },
    dataBound: function(e) {
        dataBoundScheduler(e);
    },
    save: function(e) {
        saveScheduler(e);
    },
    views: [
        "week",
        "month"
    ],
    dataSource: {
        data: _data,
        schema: {
            model: {
                id: "eventID",
                fields: {
                        eventID: { type: "number" },
                        title: { defaultValue: "No title", validation: { required: true } },
                        start: { type: "date" },
                        end: { type: "date" },
                        pending: { type: "boolean", defaultValue:true },
                        recurrenceRule: { nullable: true },
                        recurrenceException: { nullable: true },
                        description: { nullable: true },
                        careAssistantId: { nullable: true },
                        clientId: { nullable:true },
                        ownTimeSlot: { type: "boolean", defaultValue:true },
                        isAllDay: { type: "boolean" }
                }
            }
        }
    },
    group: {
        resources: [ "care" ]
    },
    resources: [
        {
            field: "careAssistantId",
            name: "care",
            dataSource: [
                { 
                    // Change the text with care giver name, change value with care giver id
                    text: _schedulerName, value: _schedulerId, color: "#00FF00" 
                }
            ],
            title: "Care"
        }
    ]
});

我正在使用的所有变量都已定义,所以也许我只是在某处有一个小的语法错误。奇怪的是,firefox firebug中没有生成错误。

1 个答案:

答案 0 :(得分:2)

稍加修改的版本似乎按预期工作:http://jsbin.com/iJATePU/1/edit

以下是有效的代码:

var _data = [{
    eventID: 7,
    title: "Physical therapy.",
    start: new Date("2013/06/12 13:00"),
    end: new Date("2013/06/12 14:30"),
    pending:true,
    recurrenceRule: "",
    recurrenceException: "",
    description: "Take my mom to her physical therapy.",
    isAllDay:false,
    ownTimeSlot:true,
    careAssistantId: 5,
    clientId: 6
},{
    eventID: 8,
    title: "Group meeting.",
    start: new Date("2013/06/13 12:00"),
    end: new Date("2013/06/13 13:30"),
    pending:false,
    recurrenceRule: "",
    recurrenceException: "",
    description: "Take my brother to his group meeting.",
    isAllDay:false,
    ownTimeSlot:true,
    careAssistantId: 5,
    clientId: 6
},{
    eventID: 9,
    title: "Make dinner.",
    start: new Date("2013/06/13 18:00"),
    end: new Date("2013/06/13 20:30"),
    pending:true,
    recurrenceRule: "FREQ=DAILY;INTERVAL=2;COUNT=8",
    recurrenceException: "",
    description: "Make dinner for my mom.",
    isAllDay:false,
    ownTimeSlot:true,
    careAssistantId: 5,
    clientId: 6
} ];

$("#scheduler").kendoScheduler({
  date: new Date("2013/06/13"),    // Change this to current date with twig
  startTime: new Date("2013/06/13 10:00"),    // Change this to current date with twig
  allDaySlot: true,
  edit: function(e) {
    editScheduler(e);
  },
  moveStart: function(e) {
    moveStartScheduler(e);
  },
  navigate: function(e) {
    navigateScheduler(e);
  },
  remove: function(e) {
    removeScheduler(e);
  },
  resize: function(e) {
    resizeScheduler(e);
  },
  resizeEnd: function(e) {
    resizeEndScheduler(e);
  },
  move: function(e) {
    moveScheduler(e);
  },
  moveEnd: function(e) {
    moveEndScheduler(e);
  },
  add: function(e) {
    addScheduler(e);
  },
  dataBound: function(e) {
    dataBoundScheduler(e);
  },
  save: function(e) {
    saveScheduler(e);
  },
  views: [
    "week",
    "month"
  ],
  dataSource: {
    data: _data,
    schema: {
      model: {
        id: "eventID",
        fields: {
          eventID: { type: "number" },
          title: { defaultValue: "No title", validation: { required: true } },
          start: { type: "date" },
          end: { type: "date" },
          pending: { type: "boolean", defaultValue:true },
          recurrenceRule: { nullable: true },
          recurrenceException: { nullable: true },
          description: { nullable: true },
          careAssistantId: { nullable: true },
          clientId: { nullable:true },
          ownTimeSlot: { type: "boolean", defaultValue:true },
          isAllDay: { type: "boolean" }
        }
      }
    }
  }
});