New to Kendo UI for jQuery? Download free 30-day trial

Integrate Month View Scheduler with Charts in Each Date

Environment

Product Progress® Kendo UI® Scheduler for jQuery

Description

How can I inject a Chart into each date of the Scheduler month view in AngularJS?

Solution

Place and initialize the Chart in the dayTemplate of the Scheduler month view.

<div id="example" ng-app="KendoDemos">
  <div ng-controller="MyCtrl">
    <div kendo-scheduler k-options="schedulerOptions"></div>
    <script id="dayTemplate" type="text/x-kendo-template">
        <div id="chart#=date.getTime()#"></div>
    </script>
  </div>
</div>

<script>
  angular.module("KendoDemos", [ "kendo.directives" ])
    .controller("MyCtrl", function($scope){

    var baseDate = new Date(2013, 4, 1).getTime();

    $scope.schedulerOptions = {
      dataBound: function(e) {
        var scheduler = e.sender;
        var element = scheduler.element;
        var days = element.find('.k-scheduler-content .k-scheduler-table td[role="gridcell"]');

        for (var i = 0; i < days.length; i++) {
          var element = $(days[i]);
          var slot = scheduler.slotByElement(element);

          if (!slot) {
            continue;
          }

          var dateTime = slot.startDate.getTime();
          var divided = dateTime / baseDate;

          $("#chart" + dateTime).kendoChart({
            chartArea: {
              height: 140
            },
            seriesDefaults: {
              type: "bar"
            },
            valueAxis: {
              min: 1,
              max: 1.005,
              labels: {
                visible: false
              }
            },
            label: false,
            series: [{
              data: [divided]
            }]
          });
        }
      },
      dayTemplate: kendo.template($("#dayTemplate").html()),
      date: new Date("2022/6/13"),
      editable: false,
      height: 1000,
      views: [
        "month"
      ],
      dataSource: {
        batch: true,
        transport: {
          read: {
            url: "https://demos.telerik.com/kendo-ui/service/tasks",
            dataType: "jsonp"
          },
          update: {
            url: "https://demos.telerik.com/kendo-ui/service/tasks/update",
            dataType: "jsonp"
          },
          create: {
            url: "https://demos.telerik.com/kendo-ui/service/tasks/create",
            dataType: "jsonp"
          },
          destroy: {
            url: "https://demos.telerik.com/kendo-ui/service/tasks/destroy",
            dataType: "jsonp"
          },
          parameterMap: function(options, operation) {
            if (operation !== "read" && options.models) {
              return {models: kendo.stringify(options.models)};
            }
          }
        },
        schema: {
          model: {
            id: "taskId",
            fields: {
              taskId: { from: "TaskID", type: "number" },
              title: { from: "Title", defaultValue: "No title", validation: { required: true } },
              start: { type: "date", from: "Start" },
              end: { type: "date", from: "End" },
              startTimezone: { from: "StartTimezone" },
              endTimezone: { from: "EndTimezone" },
              description: { from: "Description" },
              recurrenceId: { from: "RecurrenceID" },
              recurrenceRule: { from: "RecurrenceRule" },
              recurrenceException: { from: "RecurrenceException" },
              ownerId: { from: "OwnerID", defaultValue: 1 },
              isAllDay: { type: "boolean", from: "IsAllDay" }
            }
          }
        }
      }
    };
  })
</script>

See Also

In this article