IsAllDay Explanation

[Bill]

Hi,

I've got my scheduler working mostly.  As I'm working through my use cases I've noticed that when I create an all day event that shows on e.g. 9/29/13, the database gets a matching value for start and end that shows 9/28/2013 7:00:00 PM.  I find this to be odd and confusing.  Am I missing something here or is this just the way things work with the scheduler?

Also, I'm successfully using the built in dialog to add and edit events.  How do I control validation on those dialogs.  How do I control what fields are shown on those dialogs.  E.g. I'm getting a dropdown list for EventType but not for my employeeId.

Here is the code.  Thanks in advance.

@(Html.Kendo().Scheduler<Shiner.ViewModels.CompanyEventVM>()
    .Name("scheduler")
    .Date(DateTime.Now)
    .AllDaySlot(true)
    .EventTemplateId("event-template")
    .AllDayEventTemplateId("all-day-event-template")
    .Events(events => events.DataBound(
        "calenderBound"
        ))
    .Editable(e =>
    {
        e.Create(true);
        e.Destroy(false);
        e.Update(true);
    })
    .Height(550)
    .Views(views =>
    {
        views.DayView();
        views.WeekView();
        views.MonthView(v => v.Selected(true));
        views.AgendaView();

    })

    .Timezone("Etc/UTC")
    .Resources(resource =>
    {
        resource.Add(m => m.EventType)
            .Title("EventType")
            .DataTextField("Text")
            .DataValueField("Value")
            .DataColorField("Color")
            .BindTo(new[] {
            new { Text = "PTO Request", Value = 1, Color = "#6c58f0" } ,
            new { Text = "Birthday", Value = 2, Color = "#3a8bd8" },
            new { Text = "Anniversary", Value = 3, Color = "#3ba96a" },
            new { Text = "Review", Value = 4, Color = "#c437d3" },
            new { Text = "Notation", Value = 5, Color = "#ff9400" },
            new { Text = "Absence", Value = 6, Color = "#d2006b" },
            new { Text = "Holiday", Value = 7, Color = "#d8f800" },
            new { Text = "Acrual", Value = 8, Color = "#035607"},
            new { Text = "CompanyEvent", Value = 9, Color = "#0232a3"}
        });
    })
    .DataSource(d => d
        .Model(m =>
        {
            m.Id(f => f.Id);
            m.Field(f => f.EventType);
            m.Field(f => f.EmployeeId);
            m.Field(f => f.Start);
            m.Field(f => f.End);
        })
        .Read("Events_Json", "CompanyEvents")
        .Update("UpdateCompanyEvent", "CompanyEvents")
        .Create("CreateCompanyEvent", "CompanyEvents")
    )
)

[Vladimir Iliev]

Hi Bill,


Please note that when you make given event "AllDay" event, the Scheduler ignores the time information from the saved data (as there is no way to create a date without time information). 

 
Also you can extend the Scheduler built-in validator to include custom rules - for convenience I created small example which demonstrates such scenario:

• KendoUI Scheduler add custom validation rules

You can define custom editor template where you can control which fields should be edit and with what editor. 

Regards,
Vladimir Iliev
Telerik

[FireHolster]

Hi Bill - Just wanted to see if you can help. I am new to the area. Just wanted to see if you can help me know 
where and how you have created your custom templates?

.EventTemplateId("event-template")    .AllDayEventTemplateId("all-day-event-template")

[Bill]

Bikrant,

Here are the templates referenced in the code above.

The last one can be used to customize the popup editor for scheduler events.  I'm not using it at this point.

<script id="event-template" type="text/x-kendo-template">
    <div title="#: Name # #: description #" class="#: EventTypeString #">#: Name #</div>
</script>

<script id="all-day-event-template" type="text/x-kendo-template">
    <div title="#: Name #: #: description #" class="#: EventTypeString #">#: Name #</div>
</script>

<script id="editor" type="text/x-kendo-template">
   <p>
       <label>Title: <input data-bind="value: title" /></label>
   </p>
   <p>
       <label>Start: <input data-role="datetimepicker" data-bind="value: start" /></label>
   </p>
   <p>
       <label>Start: <input data-role="datetimepicker" data-bind="value: end" /></label>
   </p>
</script>

Also, note that I have not figured out how to control the height of the scheduler bars using the supplied properties, so I did it with JS.  Here is that code below.

<script type="text/javascript">
    function calenderBound() {
        $("div .k-event").height(20);
        $("div .k-event").children().fadeOut().fadeIn();
    }
</script>

Hope this helps.
Bill

[FireHolster]

bill - trying them out..thanks for the reply

[Matt]

Hi Vladimir,

How do you prevent all-day appointments from being dragged anywhere but the All Day Slot?

 Thanks

[Georgi Krustev]

Hello Matt,

You can use the moveEnd event to control the movement of the scheduler events. For instance, you can prevent its re-positioning if the drop slot does not match your criteria:

• http://dojo.telerik.com/@ggkrustev/ErANi

Regards,
Georgi Krustev
Telerik