Block schedule time

[S_Line]

Can i block the past schedule time or block some schedule's time for anyone click on?

[Karthigeyan Krishnamurthi]

Dear Customer, 

 

Greeting from Syncfusion. 

 

We have prepared the below sample to prevent the CRUD actions in the past time cells. 

https://stackblitz.com/edit/a8n7fm-q994v9?file=index.js 

eventRendered: function (args) { 

    if (new Date() - new Date(args.data.StartTime) > 0) { 

      args.data.IsReadonly = true 

      args.element.setAttribute('aria-readonly', 'true'); 

      args.element.classList.add('e-read-only'); 

    } 

  }, 

  dragStop: function (args) { 

    if (new Date() - new Date(args.data.StartTime) > 0) { 

      args.cancel = true; 

    } 

  }, 

  resizeStop: function (args) { 

    if (new Date() - new Date(args.data.StartTime) > 0) { 

      args.cancel = true; 

    } 

  }, 

  popupOpen: function (args) { 

    if (new Date() - new Date(args.data.startTime) > 0) { 

      args.cancel = true; 

    } 

  }, 

  actionBegin: function (args) { 

    if (args.requestType == 'eventCreate' || args.requestType == 'eventDelete' || args.requestType == 'eventChange') { 

      let data = (args.requestType == 'eventCreate') ? args.data[0] : args.data; 

      if (new Date() - new Date(data.StartTime) > 0) { 

        args.cancel = true; 

      } 

    } 

  } 

 

 

Regards, 

Karthi 

 

[S_Line]

Thank's for the answer, but, i need to block only the past time, and not the past event. Can i write some text to inform that "this time is blocked"?

[Karthigeyan Krishnamurthi]

Dear Customer,   

 

Thanks for your update. 

 

We modified our previous sample to make only the past time cells as read-only and also displayed custom text with custom color using renderCell and cellTemplate options. 

https://stackblitz.com/edit/a8n7fm-bm6nxx?file=index.js 

cellTemplate: '<div class="templatewrap">${getCellContent(data.date)}</div>', 

 

renderCell: function(args) { 

        if (args.element.classList.contains('e-work-hours') || args.element.classList.contains('e-work-cells')) { 

          if (args.date.getTime() < new Date().getTime()) { 

            args.element.classList.add('custom'); 

          } 

        } 

    } 

 

.custom { 

              background-color: #babebd !important; 

            } 

 

.e-schedule .e-vertical-view .e-all-day-cells .templatewrap { 

              display: none !important; 

            } 

 

 

Regards, 

Karthi 

[S_Line]

Ok, thank you! Helped me!!

[Nevitha Ravi]

Dear Customer, 

  

We are glad that our solution meets your requirement and please let us know if you need any further assistance. 

  

Regards, 

Nevitha.