Telerik Forums
Kendo UI for jQuery Forum
0 answers
16 views

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.

Fernando
Top achievements
Rank 1
 asked on 21 Feb 2024
0 answers
17 views
Good morning,
I have a problem with the scheduler and its vertical lines in the header and table.
As you can see, the lines are offset by some fraction of a millimeter. Nothing in the dimensions has been changed, the scheduler loads itself in this form. Trying to resize the cell doesn't change anything.



Sometimes it happens from the very beginning, sometimes only at a certain point do these lines stop being in the right place.



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:



n/a
Top achievements
Rank 1
 asked on 24 Jan 2024
1 answer
16 views

Since printing from the scheduler uses the current view, I was would like to make the view be 2 months.

Am trying to show multiple projects and only 30 days worth isn't quite doing it.

SIMILARLY, 

if I'm in near the end of the month, showing the Timeline Month view only shows me a few days into the future - I don't care about past days.
Is there a way to set the STARTING DATE in a month view?
IF SO, perhaps specifying an ENDING DATE is the answer to my first question (Start + 60).

 

Thx
Jaymer...

Martin
Telerik team
 answered on 24 Jan 2024
1 answer
44 views

Hi Team,

I am using Kendo Scheduler in my project. I want to start my week and month from Monday. Currently they are starting from Sunday.

Will you please suggest me a way to solve this.

Thanks

Neli
Telerik team
 answered on 29 Sep 2023
1 answer
35 views

Hi I want to auto close the Popup box whenever any conflict is found in scheduler or when I press OK in warning box.  it could either be a edit popup box or create new event popup box. I want both will be auto close after warning message. PFA the same

Regards

Pankaj

 

Martin
Telerik team
 answered on 27 Sep 2023
0 answers
46 views

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

Pankaj
Top achievements
Rank 1
Iron
Iron
 updated question on 07 Sep 2023
0 answers
32 views


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.)

Alamo
Top achievements
Rank 1
 asked on 27 Aug 2023
1 answer
60 views

Hi, How can I check if an event exists in Kendo Scheduler, including recurring registration?

Please help me, thansk!

 

Nikolay
Telerik team
 answered on 19 Jul 2023
0 answers
47 views

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

Pankaj
Top achievements
Rank 1
Iron
Iron
 updated question on 18 Jul 2023
1 answer
104 views

Hi team

Facing issue related to design. When bind records of around 100 groups then it shows result like this.

 

I tried with some workaround but still have a few issues. Tried to set the width of the columns using the below code. It increases size but the appointments size not increasing refer to below.

var minColumnWidth = 200;
var columns = $(".k-scheduler-header .k-scheduler-table > tbody > tr:last-child > th").length;
var availableWidth = $("#Scheduler").width() - $(".k-scheduler-layout > tbody > tr > td:first-child").width() - parseInt($(".k-scheduler-header").css("padding-right")) - 1;
var width = Math.max(columns * minColumnWidth, availableWidth);
$(".k-scheduler-content .k-scheduler-table").width(width);
$(".k-scheduler-header .k-scheduler-table").width(width);

 

 

Neli
Telerik team
 answered on 15 Jun 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?