如何自定义jQuery版Kendo Scheduler的小时显示？

Hey there! The issue you're facing is that Kendo Scheduler's default setup uses fixed-interval ticks (your majorTick: 60 makes it show every hour), but you need to display specific, non-uniform time slots instead. Here's how to fix this:

Step 1: Define your custom time slots #

First, create an array of the exact times you want to display. This will act as a filter for which time headers get rendered.

Step 2: Update the Scheduler configuration #

Modify your scheduler setup to:

• Restrict the time range with startTime and endTime (so you don't show times outside your desired window)
• Replace the default time header rendering with a custom template that only shows your target times
• Remove the majorTick and minorTickCount settings since we're no longer using fixed intervals

Here's the updated code:

// Define your custom time list
const customTimeSlots = ["09:00", "11:00", "14:00", "16:00", "18:00", "18:30", "19:00"];

$("#schedulerQ").kendoScheduler({
  // Fix date format to avoid browser parsing issues (JS Date prefers safe formats)
  date: new Date(2018, 0, 28, 9, 0), 
  startTime: new Date(2018, 0, 28, 9, 0),
  endTime: new Date(2018, 0, 28, 19, 30), // Cover up to 19:30 to include your last slot
  views: [{
    type: "week",
    dateHeaderTemplate: kendo.template("<span class='days-name'>#=kendo.toString(date, 'dddd dd/MM')#</span>"),
    // Custom time header template to filter and show only your desired times
    timeHeaderTemplate: kendo.template(`
      #
        // Format current slot time to match our custom list format
        const currentTime = kendo.toString(date, 'HH:mm');
        // Only render the time if it's in our custom list
        if (customTimeSlots.includes(currentTime)) {
          #<span class="custom-time-slot">#= currentTime #</span>#
        }
      #
    `)
  }],
  allDaySlot: false,
  selectable: true,
  // Keep your other existing configurations here...
});

Step 3: Hide unused time slots with CSS #

The template above only renders text for your target times, but Kendo still creates empty slots for the other hours. Add this CSS to hide those empty slots:

// Hide all time slots by default
.k-scheduler-times tr {
  display: none;
}

// Only show slots that have our custom time text
.k-scheduler-times tr:has(.custom-time-slot) {
  display: table-row;
}

Quick Notes: #

• The date format fix: new Date('28/01/2018 09:00') can fail in some browsers because JavaScript's Date constructor doesn't reliably parse DD/MM/YYYY format. Using new Date(2018, 0, 28, 9, 0) is safer (months are 0-indexed, so January is 0).
• The :has() CSS selector works in all modern browsers. If you need to support older browsers, you can adjust the template to add a class directly to the table row, but :has() is the cleanest approach today.

内容的提问来源于stack exchange，提问作者Simsim viap