get free hours in the schedule

[Hani]

i want to get all the free hours in my calendar to add them to a dropdown so use can select from them to avoid appointments duplication

[Vijay Ravi]

Hi Hani

You can achieve your requirement with help of the created, dataBound events, and getCurrentViewEvents method of the Schedule as shown in the below code snippet.

[app.vue]

 

created: function () {

      var time = new Date(2023, 0, 1).getTime();

      var diff = 1800000;

      for (var i = 0; i < 48; i++) {

        this.listOfHours.push(new Date(time).toLocaleTimeString().replace(":00 ", " "));

        time += diff;

      }

    },

    dataBound: function () {

      var currentViewApps = this.$refs.scheduleObj.ej2Instances.getCurrentViewEvents();

      var resultHours = [...this.listOfHours];

      for (var i = 0; i < currentViewApps.length > 0; i++) {

        var start = new Date(currentViewApps[i].StartTime.getTime());

        var end = new Date(currentViewApps[i].EndTime.getTime());

        var startTime = start.getTime();

        var count = (end.getTime() - start.getTime()) / 1800000;

        for (var j = 0; j < count; j++) {

          var time = new Date(startTime).toLocaleTimeString().replace(":00 ", " ");

          var index = resultHours.indexOf(time);

          if (index > -1) {

            resultHours.splice(index, 1);

          }

          startTime += 1800000;

        }

      }

      this.$refs.dropDownObj.ej2Instances.dataSource = resultHours;

    }

Regards,

Vijay Ravi

Attachment: vue_customize_e759324c.zip