[Solved] Date Header displays an incorrect value "12:00 AM" in every slot when majorTickis set to "full day" (1440) in timeline month view

[Kumeri]

Date Header displays an incorrect value "12:00 AM" in every slot when majorTickis set to "full day" (1440) in timeline views. 

<script>
    $(function () {
        $("#scheduler").kendoScheduler({
            date: new Date("2025/6/13"),
            eventHeight: 50,
            majorTick: 1440,
            views: [ "timeline", "timelineWeek", "timelineWorkWeek", "timelineMonth"],
            timezone: "Etc/UTC",
            dataSource: {
                batch: true,
                transport: {
                    read: {
                        url: "https://demos.telerik.com/service/v2/core/meetings"
                    },
                    update: {
                        url: "https://demos.telerik.com/service/v2/core/meetings/update",
                        type: "POST",
                        contentType: "application/json"
                    },
                    create: {
                        url: "https://demos.telerik.com/service/v2/core/meetings/create",
                        type: "POST",
                        contentType: "application/json"
                    },
                    destroy: {
                        url: "https://demos.telerik.com/service/v2/core/meetings/destroy",
                        type: "POST",
                        contentType: "application/json"
                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read" && options.models) {
                            return kendo.stringify(options.models);
                        }
                    }
                },
                schema: {
                    model: {
                        id: "meetingID",
                        fields: {
                            meetingID: { from: "MeetingID", type: "number" },
                            title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                            start: { type: "date", from: "Start" },
                            end: { type: "date", from: "End" },
                            startTimezone: { from: "StartTimezone" },
                            endTimezone: { from: "EndTimezone" },
                            description: { from: "Description" },
                            recurrenceId: { from: "RecurrenceID" },
                            recurrenceRule: { from: "RecurrenceRule" },
                            recurrenceException: { from: "RecurrenceException" },
                            roomId: { from: "RoomID", nullable: true },
                            attendees: { from: "Attendees", nullable: true },
                            isAllDay: { type: "boolean", from: "IsAllDay" }
                        }
                    }
                }
            },
            group: {
                resources: ["Rooms"],
                orientation: "vertical"
            },
            resources: [
                {
                    field: "roomId",
                    name: "Rooms",
                    dataSource: [
                        { text: "Meeting Room 101", value: 1, color: "#2572c0" },
                        { text: "Meeting Room 201", value: 2, color: "#f8a398" }
                    ],
                    title: "Room"
                },
                {
                    field: "attendees",
                    name: "Attendees",
                    dataSource: [
                        { text: "Alex", value: 1 },
						{ text: "Bob", value: 2 },
						{ text: "Charlie", value: 3 }
                    ],
                    multiple: true,
                    title: "Attendees"
                }
            ]
        });
    });
</script>

 

[Anton Mironov]

Hi Kumeri,

Thank you for the code snippet and the details provided.

When you set majorTick: 1440 (full day) in the timeline views of the Scheduler, the default date header will display "12:00 AM" for each slot, which is not meaningful for full-day slots. To display only the day or date instead, you can customize the dateHeaderTemplate for each timeline view.

Here's how you can update your configuration to show just the day name or date in the header:

$("#scheduler").kendoScheduler({
    date: new Date("2025/6/13"),
    eventHeight: 50,
    majorTick: 1440,
    views: [
        {
            type: "timeline",
            dateHeaderTemplate: "<strong>#=kendo.toString(date, 'dddd')#</strong>"
        },
        {
            type: "timelineWeek",
            dateHeaderTemplate: "<strong>#=kendo.toString(date, 'dddd')#</strong>"
        },
        {
            type: "timelineWorkWeek",
            dateHeaderTemplate: "<strong>#=kendo.toString(date, 'dddd')#</strong>"
        },
        {
            type: "timelineMonth",
            dateHeaderTemplate: "<strong>#=kendo.toString(date, 'd MMM yyyy')#</strong>"
        }
    ],
    timezone: "Etc/UTC",
    dataSource: {
        // ... your existing dataSource configuration ...
    },
    group: {
        resources: ["Rooms"],
        orientation: "vertical"
    },
    resources: [
        // ... your existing resources configuration ...
    ]
});

You can further customize the dateHeaderTemplate to display the date in a format that fits your needs, such as showing only the day number, full date, or day abbreviation. This approach will remove the "12:00 AM" and show the relevant day or date for each full-day slot.

I hope this information helps.

Kind Regards,
Anton Mironov
Progress Telerik