This is a migrated thread and some comments may be shown as answers.

Add an event in Kendo Scheduler using context menu and Kendo window

1 Answer 511 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Varinder
Top achievements
Rank 1
Varinder asked on 15 Apr 2020, 08:09 AM

Hi guys,

What I have done is I have added a Context Menu with option Create Event (gets visible after mouse right click on scheduler) .
Now when User clicks on Create event then opening Kendo Window. In this I have two text boxes for Date and Time. 
Here what I want is I need Date and Time from Scheduler where user has clicks right of mouse.
For Example
If user right clicks on any cell of 15th date of scheduler at 10 am then text boxes should get filled with 15-04-2020 and 10:00 am respectively
Similarly, If user right clicks on any cell of 18th date of scheduler at 01 pm then text boxes should get filled with 18-04-2020 and 01:00 pm respectively and so on.
Here is Code Snippet

Also I have attached screen shots.

Please help.

1 Answer, 1 is accepted

Sort by
0
Accepted
Veselin Tsvetanov
Telerik team
answered on 17 Apr 2020, 06:35 AM

Hi Varinder,

Here is what I would suggest to you in order to achieve the desired result:

- use a global variable where to keep the start and end Date objects:

var start = null;
var end = null;

- Within the ContextMenu open event, obtain the slot data:

open: function (e) {
  var menu = e.sender;
  var target = $(e.target);
  var text = target.hasClass("k-event") ? "" : " ";
  var scheduler = $("#scheduler").getKendoScheduler();
  var slot = scheduler.slotByElement(target);
  
  start = slot.startDate;
  end = slot.endDate;

  menu.remove(".myClass");
  menu.append([{text: text, cssClass: "myClass" }]);
}

Within the open event of the Window assign the appropriate values to the inputs:

open: function (e) {
  var windowElement = e.sender.element;
  var dateInput = windowElement.find("#date");
  var timeInput = windowElement.find("#time");
  var startTime = start.toLocaleTimeString();
  var startDate = start.toDateString();
  
  dateInput.val(startDate);
  timeInput.val(startTime);

  $("body").addClass("ob-no-scroll");
},

Here you could find a modified version of the Dojo sent:

http://dojo.telerik.com/ALoVexIk/5

Regards,
Veselin Tsvetanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Scheduler
Asked by
Varinder
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Share this question
or