How to create a calendar/scheduler with OData and KendoUI scheduler

From Sense/Net Wiki
Jump to: navigation, search
  •  
  •  
  •  
  •  
  • 100%
  • 6.3
  • Enterprise
  • Community
  • Planned

Overview

{{{2}}}
Adding custom functionality to a portlet as a front-end developer was really hard before OData. But now content and actions are accessible through the OData API of Sense/Net which allows us to create tons of custom widgets with only html and javascript. This article helps you to implement a highly customizable event calendar with event managing functionality. The following steps will show you how to get calendar events from the Content Repository trough OData, how to display them with a KendoUI scheduler and how to add, edit or delete events with OData actions.

Steps

1.Create an EventList

Go to the Content Explorer and navigate to the chosen content which will contain your calendar. Edit the chosen content and check if EventList content type is added to the Allowed Child Types field.

{{{2}}}

Choose Calendar from the New dropdown, name your calendar as you wish and add some sample events.

2.Create your scheduler view

Navigate to the Global/ContentViews folder and add a new Empty Content view folder width the name Calendar.

{{{2}}}

Open the folder and add a new custom Content View.

{{{2}}}

Clear everything from the ascx except the first row.

{{{2}}}

Add an html element to the view to bind the scheduler widget.

<div id="calendar"></div>

Include the required scripts and css files with The_Skin_System_-_for_Portal_builders#Adding_javascript_.28.js.29_references_to_pages ScriptRequest and CssRequest.

<sn:scriptrequest id="ODataManager" runat="server" path="$skin/scripts/ODataManager.js" />
<sn:scriptrequest id="KendoUi" runat="server" path="$skin/scripts/kendoui/kendo.web.min.js" />
<sn:cssrequest id="KendoCommon" runat="server" csspath="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" />
<sn:cssrequest id="KendoMetroSkin" runat="server" csspath="http://cdn.kendostatic.com/2014.2.716/styles/kendo.flat.min.css" />

KendoUI’s last version is not included in Sense/Net version 6.3 or later. If you want to get the last KendoUI version please check their [website].

Create a [Kendo template] for your events:

  <script id="event-template" type="text/x-kendo-template">
    <div class="event-template">
        <p>
            #: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #
        </p>
        <h3>#: title #</h3>
        <div style="font-size: 80%">Location: #: location #</div>
    </div>
  </script>

Create a kendo datasource and put it in your calendar view:

     var dataSource = new kendo.data.SchedulerDataSource({
              type: "odata",
              transport: {
                  read: {
                      url: '/Odata.svc' + currentCalendarPath + "?  $select=Name,DisplayName,StartDate,EndDate,Description,Location,AllDay,Id,EventType&$filter=IsOf('CalendarEvent')&metadata=no&enableautofilters=true",
                      dataType: "json"
                  }
              },
              schema: {
                  model: {
                      id: "name",
                      fields: {
                          name: { from: "Name", type: "string" },
                          title: { from: "DisplayName", defaultValue: "No title" },
                          start: { type: "date", from: "StartDate" },
                          end: { type: "date", from: "EndDate" },
                          location: { from: "Location" },
                          description: { from: "Description" },
                          isAllDay: { type: "boolean", from: "AllDay" }
                      }
                  }
              }
          });

Bind the KendoUI scheduler widget to the chosen HTML element:

       $("#calendar").kendoScheduler({
              date: new Date("2014/9/03"),
              startTime: new Date("2014/9/03 07:00 AM"),
              height: 600,
              views: [
                  "day",
                      { type: "week", selected: true },
                      "month",
                      "agenda"
              ],
              eventTemplate: $("#event-template").html(),
              timezone: "Etc/UTC",
              dataSource: dataSource
       });

about kendoui scheduler’s further configuration and customization please check [KendoUI documentation].

3.Add and configure a portlet

Navigate to the page which will display your calendar and switch to edit mode in the PRC. In the Add portlet dialog, choose Application in the tree and User Control Portlet from the list.

{{{2}}}

On the portlet property dialog set your newly created view as a User Control Path.

{{{2}}}

Click Ok and Check-in your page with the PRC.

{{{2}}}

4.Adding, editing, modifying events

If you want to connect the scheduler's create, update and delete function with Sense/Net you have to modify the KendoUI datasource in your calendar view adding create, update and destroy operations to the datasource’s transport. You have to add parameterMap option too which contain the data format, the event’s content type, fields and values.

   create: {
            url: odata.dataRoot + odata.getItemUrl(currentCalendarPath),
            type: "POST",
            dataType: "json"
          },
   update: {
            url: function (data) {
              return odata.dataRoot + currentCalendarPath + "('" + data.Name + "')";
            },
            type: "PUT",
            dataType: "json"
            },
   destroy: {
             url: function (data) {
               return odata.dataRoot + currentCalendarPath + "('" + data.Name + "')/Delete";
             },
             type: "POST",
             dataType: "json"
            },
   parameterMap: function (options, operation) {
                      if (operation === "read") { return };
                      if ((operation === "create" || operation === "update") && options) {
                          return "models=[" + JSON.stringify({ 
                                '__ContentType': 'CalendarEvent', 
                                'DisplayName': options.DisplayName,  
                                'StartDate': options.StartDate,
                                'EndDate':options.EndDate, 
                                'Location':options.Location, 
                                'AllDay':options.AllDay,
                                'Description':options.Description }) + "]";
                }
}
{{{2}}}

Related links

References