Only allow create appointments every hour or half an hour

Question

Hi, I have a Scheduler on my project as following:

@(Html.EJ().Schedule("ELLCalendar")

.Width("100%")

.Height("525px")

.CurrentDate(DateTime.Today)

.CurrentView(CurrentView.Day)

.ShowWeekend(false)

.Orientation(Orientation.Horizontal)

.TimeScale(ts => ts.Enable(true).majorSlot(60).minorSlotCount(2))

.Resources(res => { res.Field("SlotId").Title("Slot").Name("Slots").AllowMultiple(true).ResourceSettings(flds => flds.Datasource(ViewBag.Slots).Text("Text").Id("id").GroupId("GroupId").Color("color")).Add(); })

.Group(gr =>

{

gr.Resources(ViewBag.Resources);

})

.AppointmentSettings(fields => fields.Datasource(Model)

.ApplyTimeOffset(false)

.Id("Id")

.Subject("Subject")

.StartTime("StartTime")

.EndTime("EndTime")

.Description("Description")

.Location("Location")

.Categorize("Categorize")

.AllDay("IsAllDay")

.Recurrence("IsRecurrence")

.RecurrenceRule("RecurrenceRule"))

.ReadOnly(ViewBag.Editable)

.StartHour(8)

.EndHour(19)

.ReadOnly(ViewBag.ReadOnly)

.EnableAppointmentResize(false)

)

Now, I want all appointments to start and end at 00th minute or at 30th minute (e.g. from 6:00am - 6:30AM, instead of 6:10 - 6:40).

How can I program so that I can enforce this?

Karthigeyan Krishnamurthi · Answer

Hi Andrew,

Thank you for contacting Syncfusion support.

By default, all appointments will be created only with 30 minutes interval, only on resizing and dragging the default interval will be set to 10. In latest version, we can customize the resizing and dragging interval and for the same we have prepared the below sample for your reference.

http://jsplayground.syncfusion.com/phss1l5s

<Code>

drag: "customInterval",

resize: "customInterval"

function customInterval(args) {

args.interval = 30;

}

</Code>

Regards,

Karthigeyan

 
drag: "customInterval", 
resize: "customInterval" 
 
function customInterval(args) { 
    args.interval = 30; 
}

Regards, Karthigeyan

Andrew Jang · Answer

Hi, I believe I've upgraded my project into the latest Syncfusion Version at this moment. (v 15.3.0.33)

I've done this by following steps.

https://help.syncfusion.com/common/faq/how-to-upgrade-the-project-into-a-new-syncfusion-version

Since "Project Migration Utility" was not available on my Synfusion Essential Studio for some reason, I've upgraded it manually.

However, I still don't see "Drag" or "Resize" property that you mentioned for EJ().Schedule.

Any suggestions??

Sellakumar · Answer

Hi Andrew, Thanks for your update. The Drag and Resize events of Schedule are available within the “ScheduleClientSideEvents” property. The client side events needs to be defined as follows:

 
 




Razor: 
 
@(Html.EJ().Schedule("Schedule") 
        .Width("100%") 
        .Height("525px") 
        .ScheduleClientSideEvents(evt => evt.Drag("customInterval").Resize("customInterval")) 
        .CurrentDate(new DateTime(2017, 1, 2)) 
    ) 
) 


Javascript: 
 
function customInterval(args) { 
     args.interval = 30; 
}

We have also prepared the sample based on your requirement which can be download from the following location: Download Kindly check the above sample and revert us with further details, if we have misunderstood your requirement or else if you need any further assistance on this. Regards, Sellakumar K

Andrew Jang · Answer

This works! Thank you!

Nevitha Ravi · Answer

Hi Andrew, 
  
We are happy that our solution has fulfilled your requirement. Kindly let us know if you need any assistance. 
  
Regards, 
Nevitha.