Marking certain appointments as not selectable in Kendo Scheduler for ASP.NET MVC

Question

I have the Scheduler loading multiple appointments. Some of those appointments should be read-only and the user should not be able to select them. Some of the appointments they should be able to select and edit, though. The logic for this is determined on the server and passed as a field in the payload on load.

I've attempted to hook into several client side events, such as Edit, MoveStart, and ResizeStart and cancel the edit events. This does work, however I would like the user to not even be able to select the event.

I do not see any client side events for Selecting that I can cancel.

I did attempt to iterate through the appointments on DataBound, but was unsure of how to prevent selecting at that point.

Answer 1

I suggest using a custom event template with and edit button and setting editable and selectable properties as false for the scheduler.

<script id="event-template" type="text/x-kendo-template">
  <div>
     <label>Title: #: title #<label>
     # if (allowEdit) { #
      <button style="margin-left:50px;" onclick="editSchedulerEvent(#:id#)">Edit</button>
     # } #
  </div>
  <div>
      Attendees:
      # for (var i = 0; i < resources.length; i++) { #
        #: resources[i].text #
      # } #
  </div>
</script>
<div id="scheduler"></div>
<script>
  function editSchedulerEvent(id){
    var scheduler = $("#scheduler").data("kendoScheduler");
    var event = scheduler.dataSource.get(id);
    scheduler.editEvent(event);
  }

$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  eventTemplate: $("#event-template").html(),
  editable: false,
  selectable: false,
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview",
      atendees: [1,2],
      allowEdit: true
    },
    {
      id: 2,
      start: new Date("2013/6/6 10:00 AM"),
      end: new Date("2013/6/6 11:00 AM"),
      title: "Interview",
      atendees: [3,4],
      allowEdit: false
    }
  ],
  resources: [
    {
      field: "atendees",
      dataSource: [
       { value: 1, text: "Alex" },
       { value: 2, text: "Bob" },
        { value: 3, text: "John" },
       { value: 4, text: "Jane" }
      ],
      multiple: true
    }
  ]
});
</script>
</body>
</html>