Как добавить атрибут linkClass-Atrribute в данные событий календаря пользовательского интерфейса Kendo? - PullRequest
Новая
       53

Как добавить атрибут linkClass-Atrribute в данные событий календаря пользовательского интерфейса Kendo?

0 голосов
/ 30 апреля 2020

Я использую календарь Kendo UI для отображения доступных встреч. На первом этапе я создал массив встреч. Это показано в календаре. Пока все хорошо.

Теперь я хотел бы добавить дополнительный атрибут для отдельных встреч, а затем назначить CSS классы в шаблоне.

Пока я могу только запросить значение (День) в шаблоне.

Как мне поменять ссылку класса? 

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/calendar/template">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.metroblack.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.metroblack.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2020.1.406/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
    

</head>
<body>

    <div id="example">
        <div class="demo-section k-content">
            <div id="special-days">
                <div id="calendar"></div>
            </div>
        </div>

        <script>
            $(document).ready(function() {
              
                var today = new Date(),
                    events = [
                        +new Date(today.getFullYear(), today.getMonth(), 8),
                        +new Date(today.getFullYear(), today.getMonth(), 13),
                        +new Date(today.getFullYear(), today.getMonth(), 24),
                        +new Date(today.getFullYear(), today.getMonth() + 1, 6),
                        +new Date(today.getFullYear(), today.getMonth() + 1, 7),
                        +new Date(today.getFullYear(), today.getMonth() + 1, 25)
                    ];

                $("#calendar").kendoCalendar({
                    value: today,
                    dates: events,
                  	disableDates: ["sa", "su"],
                    weekNumber: true,
                    month: {
                        content: '# if ($.inArray(+data.date, data.dates) != -1) { #' +
                                    '<div class="' +
                                        '# console.log(data); if (data.value < 10) { #' +
                                            "full" +
                                        '# } else if ( data.value < 20 ) { #' +
                                            "free" +
                                        '# } else { #' +
                                            "half" +
                                        '# } #' +
                                    '">#= data.value #</div>' +
                                    '# } else { #' +
                                    '#= data.value #' +
                                    '# } #',
                        weekNumber: '<a class="italic">#= data.weekNumber #</a>'
                    },
                    footer: false
                });
            });
        </script>

        <style>

            #calendar,
            #calendar .k-calendar-view,
            #calendar .k-content {
                width: 100%;
            }

            /* Template Days */

            .full,
            .free,
            .half {
                font-weight: bold;
            }

            .full {
                color: #fff;
                background-color: #ea0000;
            }

            .free {
                color: #ff4081;
            }

            .half {
                color: #000000;
                background-color: #ffd41e;
            }

            .italic{
                font-style: italic;
            }

        </style>
    </div>


</body>
</html>

enter image description here

1 Ответ

0 голосов
/ 07 мая 2020

Я не нашел решения для календаря пользовательского интерфейса Kendo, поэтому наткнулся на Jquery DatePicker. Вот мое решение. Может быть, это кому-то поможет. 

$(function() {
  var dates = [{
      date: '05/13/2020',
      type: 'highlightFull',
      note: 'note1'
    },
    {
      date: '05/11/2020',
      type: 'highlightSemi',
      note: 'note2'
    }
  ];

  function highlightDays(date) {
   var arrayLength = Object.keys(dates).length // Second
   for (var i = 0; i < arrayLength; i++) {
     if (new Date(dates[i].date).toString() == date.toString()) {
       return [true, dates[i].type, dates[i].note];
     }
   }
   return [true, ''];
  }

  $('#datepicker').datepicker({
    beforeShowDay: highlightDays
  });

});
td.highlightFull {
  border: none !important;
  padding: 1px 0 1px 1px !important;
  background: none !important;
  overflow: hidden;
}

td.highlightFull a {
  background: #ad3f29 url(bg.png) 50% 50% repeat-x !important;
  border: 1px #88a276 solid !important;
}

td.highlightSemi {
  border: none !important;
  padding: 1px 0 1px 1px !important;
  background: none !important;
  overflow: hidden;
}

td.highlightSemi a {
  background: #ffff33 url(bg.png) 50% 50% repeat-x !important;
  border: 1px #88a276 solid !important;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="datepicker"></div>
...