Context

We're using Scheduler component and a custom list of items. We're also using the Draggable component to let the items to be dropped into the Scheduler component. You can find the layout of the implementation in the attachment.

The configuration of the items is the following:

$(element)
  .find(`.${NS}customer-list__draggable`)
  .kendoDraggable({
    hint: () => {
      var draggableElem = $(`
      <span class="ui-draggable ${NS}customer-list__dragging">
        ${scope.customer.name} <br>
      </span>
      `);
      draggableElem.css({
        borderLeft: `3px solid ${scope.customer.displayColor}`
      });
      return draggableElem;
    },
    dragstart: event => {
      // prevent dragging on agenda view
      if ($rootScope.scheduler.viewName() === "agenda") {
        event.preventDefault();
      }
    },
    autoScroll: false,
    containment: "window",
    cursorOffset: { right: 0, top: 0, left: 0, bottom: 0 },
    distance: 50,
    group: "schedulerCustomerGroup"
  });

The configuration of the Drop are is the following:

scheduler.view().table.kendoDropTargetArea({
  group: 'schedulerCustomerGroup',
  filter: '.k-scheduler-table td, .k-scheduler-header-all-day td, .k-event',
  dragenter: (e) => {
    var offset = $(e.dropTarget).offset(),
          slot = scheduler.slotByPosition(offset.left, offset.top);

    $(slot.element).css('background', '#bce8f1');
  },
  dragleave: (e) => {
    var offset = $(e.dropTarget).offset(),
          slot = scheduler.slotByPosition(offset.left, offset.top);

    $(slot.element).css('background', '');
  },
  drop: (event) => {
    var offset = $(event.dropTarget).offset(),
        slot = scheduler.slotByPosition(offset.left, offset.top),
        dragElem = event.draggable.element[0],
        customer = _.find($rootScope.customers, {id: $(dragElem).data('customerId')});

    $(slot.element).css('background', '');

    scheduler.addEvent({
      title: customer.name,
      start: slot.startDate,
      end: slot.endDate,
      description: '',
      customerId: customer.id,
      streetAddr: customer.streetAddr,
      city: customer.city,
      state: customer.state,
      country: customer.country,
      zip: customer.zip,
      phone: customer.phone,
      lat: customer.lat,
      long: customer.long,
      accountId: customer.accountId,
      contactId: customer.d_tx_uid,
      isAllDay: slot.isDaySlot,
    });
  }
});

You can notice the group setting is the same in both configurations: schedulerCustomerGroup.

The filter configured in the kendoDropTargetArea is the following:

• .k-scheduler-table td
• .k-scheduler-header-all-day td
• .k-event

As you can see, the filter include all the cells in the Scheduler component.

Problem

The problem I'm having is when using the Work Week, and resizing the browser to an specific dimension, some cells are not being detected as drop area.

As you can see, I cannot drop the item in Wed 2/21.

A workaround is to resize the browser, but that's not a final solution I'm expecting to have.

I see the same issue on your pages



so my question is whether there is any way to prevent this, because when there are many columns, the last borders are seriously damaged as you can see:

Hi

I have tested the demo Scheduler Restriction and find its not giving accurate result when we manipulate date and time. I have added event with daily repeat occurrence (PFA the same 1.png) and open another event window with different date and time and change it manually with different date but same time whose already added (PFA the same 2.png)  , hit save then its added successfully. (PFA the same 3.png)  which is wrong according to this behaviour.  its works fine when we open popup window on same date but only change time manually, problem is with changing date and time both to different ones. Hope you understand this. please resolve this asap. 

Regards 

Pankaj

If so can you please provide some examples for 

Kendo Scheduler for Angular with custom dates range

multiple months examples 1,2,3 months view at same time.

(And does it support multiple months examples 1,2,3 months view at same time.)

Hi

I am trying to set break time like lunch,Tea time to restrict appointment for particular time. All works fine when I Set Major Tick to 60, but its not working properly when Setting Major ticks to 30.

This setting not apply between 3:30PM to 3:45PM when set MajorTick:30 (PFA the same)

My Code for this is as follows:- 

function onDataBound(e) {
                                var scheduler = e.sender;
                                var slots = $('.k-scheduler-content td[role=gridcell]');

                                for (var i = 0; i < slots.length; i += 1) {
                                    var currentSlot = $(slots[i]);
                                    var slotData = scheduler.slotByElement(currentSlot);
                                    var items = '';
                                  
                                    $.each(BreakTimeList, function (i, item) {
                                       //Trying to set it 3:00PM to 3:30PM and 3:30PM to 4:00 PM 
                                     //But this setting not apply between 3:30PM to 3:45PM when MajorTick set to 30

                                        if ((slotData.startDate.getHours() >= 3 && slotData.startDate.getMinutes() >= 00)
                                            && (slotData.endDate.getHours() <= 3 && slotData.endDate.getMinutes() <= 30)) {
                                            currentSlot.html('<i class="fa fa-stopwatch"></i>');
                                       
                                        }
                                    });
                                }
                            }

Regards 

Pankaj

Hi, perhaps this is intended functionality for reasons I'm not understanding, but when navigating within a Kendo Scheduler that has certain view types set (particularly, "week" for my purpose), the date that's received in the "navigate" event handler is inconsistent depending on which direction navigation is performed.

When navigating forward, the e.date value is that of the first day of the currently displayed week, as I would expect. However, when navigating backward, the e.date value is the last day of the displayed week. Is there a reason that the day of week for the event date is not the same regardless of which direction navigation is performed?

The console output of this Dojo exhibits the date discrepancy: https://dojo.telerik.com/eMEtuhAQ/2

Thanks!

I wrote a dojo to show the issue: https://dojo.telerik.com/omIxeDUx/8

Reproduce steps:

- Open the dojo

- Select an event of any date greater than the first date (fixed 2022-10-10)

- Click the refresh button

- You will see that the start date changed and some events will not be shown.

EDIT

For those who have the same problem, I'm make a workaround (I dont know if will work for any context), I just remove the refresh button of the scheduler and then add a new button which onclick event will just call the datasource.read() function.

The following dojo has this work around: https://dojo.telerik.com/omIxeDUx/9

I have two Kendo Schedulers. In the first one the WorkDayStart and WorkDayEnd should be custom to the day(s) being viewed. They are not static at one single time. If I am viewing one single day, I am sure I could inject some Javascript to find these and update them, then rerender the scheduler. But when viewing a week that would not help. Really they need to be a function. Is this possible?

The second scheduler is grouped by a resource of an Employee. So in this case it is more complicated. I have this one locked down to viewing only a single day view (or other views that don't include slots that may be closed like Agenda). But the columns here are dependent on the employee's availability for the day selected. So again a function is needed.

Alternatively, digging in the kendo.all.js, I see a property called "slotTemplate" but this doesn't seem to be exposed in MVC. Is there a workaround using this?

[EDIT]: I finally found the SlotTemplate as part of the views in MVC. Will play around here and possibly I can solve this on my own.

[EDIT 2]: I did get SlotTemplate working, but the real solution is to fix the WorkDayStart and WorkDayEnd. Let's say this is a program for a store. Bob logs in. Bob sees his own schedule on one tab, and the store schedule on another tab. Bob works different hours per day. The store is open different hours per day. It's not always the same. When viewing a week we need to be expanded to the most open day. When viewing a single day we should match that day.

Here's a SlotTemplate tagged in CSHTML:

views.DayView(v => v.Selected(true)).SlotTemplateId("shopSlotTemplate");

<script id="mySlotTemplate" type="text/x-kendo-template">
   #= getSlotTemplate(data, @loggedInEmployeeId) #
</script>

<script id="shopSlotTemplate" type="text/x-kendo-template">
   #= getSlotTemplate(data) #
</script>

<script id="acSlotTemplate" type="text/x-kendo-template">
   #= getSlotTemplate(data, 0) #
</script>

function getSlotTemplate(data, employeeId) {

   // Get employee ID if not passed in. If still not found then this scheduler is not grouped this way.
   if (employeeId === undefined) {
      employeeId = data.resources().EmployeeId;
   }

   let isClosed = isShopClosed(shopSchedule.Shop, data.date);

   if ((!isClosed) && (employeeId > 0) && (shopSchedule["Employee" + employeeId] !== undefined)) {
      isClosed = isShopClosed(shopSchedule["Employee" + employeeId], data.date);
   }

   return "<div class=\"" + (isClosed ? "k-nonwork-hour" : "") + "\">&nbsp;</div>";
}

This required new CSS since the TD element has margins.

div.k-scheduler-content > table > tbody > tr > td > div {
   margin: -4px -0.5em;
   height: calc(100% + 8px);
   width: calc(100% + 1em);
}

The end result is that the grid for the scheduler appears how I want it.

But working hours are still inaccurate. They are based on a single date and don't change as I move between days.

Hi there,

I have a question about timeline view on  https://demos.telerik.com/kendo-ui/scheduler/timeline. 

When I change the start-time for the event for the series cycle by daily, the expiration date on cycle will get the focus automatically.

For example, there is an event repeating after 5 occurrences by daily, but when I change the start-time, the focus on "after 5 occurrences"  will  shift to the expiration date.

Can you tell me how to solve this problem?Thanks so much!

Hi there,

I have a question about timeline view on https://demos.telerik.com/kendo-ui/scheduler/timeline. When I create a series  event, the series  event before the day will be disappeared by moving or  resizing the event of one day among the whole  series  event. 

For example, I create a series event between 2022-07-21 and 2022-07-23.  In 2022-07-22 view,  I move or resizing the series  event ,  then the   event in 2022-07-21 is disappeared .  Actually, I want to change the whole series  event between  2022-07-21 and 2022-07-23 by changing the event in 2022-07-22.

Would you tell me how to solution this problem?

Thank you so much !