Kendo UI (Scheduler) - 为每个事件添加唯一的 css 类

Posted 2023-05-07

【中文标题】Kendo UI (Scheduler) - 为每个事件添加唯一的 css 类

【英文标题】：Kendo UI (Scheduler) - Add unique css class for each event

【发布时间】：2016-05-08 21:56:09

【问题描述】：

我正在使用 Kendo UI Scheduler 来创建事件..

如何为每个事件添加唯一的 css 类？

例如：第一个事件应该有.event-red，第二个事件应该有.event-green等等......

我正在尝试添加如下所示的类，但无法正常工作... :(

data: [
    
        ...
        className: "event-red"
        ...
    ,
....

Online Demo

参考图片

代码：

$(document).ready(function() 
var date = new Date();
var _data = new kendo.data.SchedulerDataSource(
    data: [
        
            eventID: 1,
            title: "Heading 1",
            start: new Date(),
            end: new Date(),
            isAllDay: false,
            description: "Lorem ipsum content (1)",
            className: "event-red"
        ,
        
            eventID: 2,
            title: "Heading 2",
            start: new Date(),
            end: new Date(),
            isAllDay: false,
            description: "New content goes here (2)",
            className: "event-green"
        ,
        
            eventID: 3,
            title: "Heading 3",
            start: new Date(),
            end: new Date(),
            isAllDay: false,
            description: "More content goes here (3)",
            className: "event-blue"
        ,
    ],

    schema: 
        model :  id : "eventID" 
    

);

function save()
    console.log(_data);    


$('#socialMediaCalendar').kendoScheduler(

    eventTemplate: $("#event-template").html(),
    height: 600,
    messages: 
        today: "Today",
    ,
    //editable: false,
    ShowFooter: "false",
    views: [
         type: "day", title: "Day", selectedDateFormat: "0:dddd", showWorkHours: false, selected: true ,
         type: "month" ,
    ],

    dataBound: function() 
        var scheduler = this;

        var allDayEventBlock = scheduler.wrapper.find(".k-scheduler-layout>tbody>tr:nth-child(1)");
        var dayViewTimesBlock = scheduler.wrapper.find(".k-scheduler-layout .k-scheduler-times");
        var tdNoWorkHours = scheduler.wrapper.find(".k-scheduler-layout .k-nonwork-hour");
        var prevCalContentRef = scheduler.wrapper.find(".k-scheduler-layout td.et-options #previewCalDayContent");

        allDayEventBlock.remove();
        dayViewTimesBlock.remove();
        tdNoWorkHours.closest("tr").remove();
        prevCalContentRef.attr("href", "#pn-modal-day-preview");          


    ,

    save: save,
    dataSource:_data,


);

$(function () 
    $("#socialMediaCalendar").kendoTooltip(
        filter: ".k-event",
        position: "top",
        width: 250,
        content: kendo.template($('#calendarPopupTemplate').html())
    );
);

);  

HTML

<div class="container">


        <div class="rp-calendar">
            <div id="socialMediaCalendar"></div>
        </div>

    </div>
    <!-- Calendar Scheduler (Content Templates) -->
    <script id="event-template" type="text/x-kendo-template">
<table  cellpadding="0" cellspacing="0" class="scheduler-template-table">
    <tbody>
        <tr>
            <td class="et-time"  nowrap>#: kendo.toString(start, "HH:mm") #</td>
            <td class="et-content"><h3>#: title #</h3><p>#: description #</p></td>
            <td class="et-options" align="right">
                <input type="button" value="Edit" id="eventEdit" class="k-button">
        </td>
        </tr>
    <tbody>
        </table>
    </script>
    <!-- /Calendar Scheduler (Content Templates) -->

    <!-- Calendar Scheduler (Tooltip Templates) -->
    <script id="calendarPopupTemplate" type="text/x-kendo-template"> 
#var uid = target.attr("data-uid");#
#var scheduler = target.closest("[data-role=scheduler]").data("kendoScheduler");#
#var model = scheduler.occurrenceByUid(uid);#

#if(model) #

<table  cellpadding="0" cellspacing="0" class="scheduler-template-table stt-tooltip">
    <tbody>
        <tr>
            <td class="et-time"  nowrap>#=kendo.format('0:HH:mm',model.start)#</td>
            <td class="et-content" valign="middle"><h3>#: model.title #</h3><p>#=model.description#</p></td>
        </tr>
    <tbody>
        </table>
# else #
<p>No event data is available</p>
##
    </script>
    <!-- /Calendar Scheduler (Tooltip Template) -->

【参考方案1】：

好吧，既然您使用的是模板，您可以通过它们来完成。 在模板中，您可以访问 dataSource 中给出的所有属性，因此对于您的示例，您只需要添加

style="color: #= myProperty #;"

或

class:"et-content #= myProperty #"

Here is demo - 您需要查看您的模板（事件模板）和 SchedulerDataSource。

【讨论】：

嗨 @Ademar，工作就像魅力一样。我接受你的回答并支持它...感谢您的聪明TIP