Планировщик Kendo TimeLineView for Resources показывает каждое событие, как если бы оно было событием allDay - PullRequest
Новая
       23

Планировщик Kendo TimeLineView for Resources показывает каждое событие, как если бы оно было событием allDay

0 голосов
/ 04 мая 2018

Я создал эту ссылку Dojo , которая показывает мне ресурс по группам. проблема с этим представлением в том, что он показывает длинный блок, только если это событие allDay. для этого представления, как я могу применить шаблон, который показывает блок с временным диапазоном для каждого события?

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

Before

Я хочу, чтобы весь блок событий занимал полную длину, несмотря на продолжительность. похож на тот, который выделен ниже After

1 Ответ

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

Посмотрите на фрагмент кода ниже. Я сделал пару вещей:

  1. Я удалил данные title из шаблона мероприятия, поскольку вы сказали, что не хотите их видеть.
  2. Я поместил space в шаблон после элемента <p>, чтобы в событии x было место для появления. Есть другие способы сделать это, я использовал простой.

  3. Я внес изменения в стили в нижней части кода, а именно: 

    .movie-template {
    overflow: auto !important;
    width: fit-content !important;
}

.k-event {
    width: fit-content !important;
}

.space {
    width: 20px;
    height: 15px;
    display: inline-block;
}

.movie-template p {
    margin: 5px 0 0;
    display: inline-block;
}



РЕДАКТИРОВАТЬ
~~~~
Назначение встреч, заполняющих клетки, к которым они принадлежат, либо невозможно, либо чрезвычайно сложно. Я объясню почему:

Способ программирования событий: они существуют на том же уровне в DOM, что и таблица планировщика, и располагаются над ней. Планировщик рассчитывает положение и размер событий на основе времени их начала и окончания.

Чтобы вы могли разместить их так, как если бы они были событиями полного дня, вам нужно сделать одно из двух:

  1. Переопределите автоматическое размещение планировщика своим собственным кодом, который вычислит положение и размер и установит их соответствующим образом. Обратите внимание, что этот код нужно будет запускать каждый раз, когда окно изменяется, перефокусируется, поворачивается и т. Д.
  2. Определите события как «встречи на целый день» и сохраните их реальное время начала и окончания в других полях, которые вы будете использовать в своем коде. Это может нарушить другие функции, которые у вас уже есть. 

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/scheduler/resources-grouping-vertical">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.material.mobile.min.css" />

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

</head>
<body>
<div id="example" class="k-content">
    <div id="scheduler"></div>
</div>
  <script id="event-template" type="text/x-kendo-template">
    <div class="movie-template" style="width:100px">
        <p>#: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #</p>
        <span class="space"></span>
    </div>
</script>
<script>
            var MyCustomTimelistView = kendo.ui.TimelineMonthView.extend({
          options: {
            name: "MyCustomTimelistView",
            title: "Timeline Week",
            selectedDateFormat: "{0:D} - {1:D}",
            selectedShortDateFormat: "{0:d} - {1:d}",
            majorTick: 1440,
            numberOfDays: 7
          },
          name: "MyCustomTimelistView",
          calculateDateRange: function() {
            //create the required number of days

            var start = this.options.date,
                //  start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1),
                idx, length,
                dates = [];

            for (idx = 0, length = this.options.numberOfDays; idx < length; idx++) {
              dates.push(start);
              start = kendo.date.nextDay(start);
            }
            this._render(dates);
          },
          previousDate: function() {
            var date = new Date(this.startDate());

            date.setDate(date.getDate() - this.options.numberOfDays);

            return date
          }
        });
  
$(function() {
  
  

  
  
    $("#scheduler").kendoScheduler({
        date: new Date("2013/6/13"),
        startTime: new Date("2013/6/13 07:00 AM"),
        height: 600,
              eventTemplate: $("#event-template").html(),

        views: [
            "day",
            { type: "MyCustomTimelistView", selected: true,
            

            },
            "month",
            "agenda",
            "timeline"
        ],
        timezone: "Etc/UTC",
         dataBinding: function(e) {
            var view = this.view();
           $( ".k-scheduler-times > table > tbody > tr:eq(1)" ).hide();
           	$( ".k-scheduler-header-wrap > table > tbody > tr:eq(1)" ).hide();
        },
      
        dataSource: {
            batch: true,
            transport: {
                read: {
                    url: "https://demos.telerik.com/kendo-ui/service/meetings",
                    dataType: "jsonp"
                },
                update: {
                    url: "https://demos.telerik.com/kendo-ui/service/meetings/update",
                    dataType: "jsonp"
                },
                create: {
                    url: "https://demos.telerik.com/kendo-ui/service/meetings/create",
                    dataType: "jsonp"
                },
                destroy: {
                    url: "https://demos.telerik.com/kendo-ui/service/meetings/destroy",
                    dataType: "jsonp"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: 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: "#6eb3fa" },
                    { text: "Meeting Room 201", value: 2, color: "#f58a8a" }
                ],
                title: "Room"
            },
            {
                field: "attendees",
                name: "Attendees",
                dataSource: [
                    { text: "Alex", value: 1, color: "#f8a398" },
                    { text: "Bob", value: 2, color: "#51a0ed" },
                    { text: "Charlie", value: 3, color: "#56ca85" }
                ],
                multiple: true,
                title: "Attendees"
            }
        ]
    });
});
</script>
<style>
    .movie-template {
      overflow: auto !important;
      width: fit-content !important;
    }
  
    .k-event {
      width: fit-content !important;
    }
  
    .space {
        width: 20px;
        height: 15px;
        display: inline-block;
    }
  
    .movie-template img {
        float: left;
        margin: 0 8px;
    }
    .movie-template p {
        margin: 5px 0 0;
        display: inline-block;
    }
    .movie-template h3 {
        padding: 0 0 5px;
        font-size: 12px;
    }
    .movie-template a {
        color: #ffffff;
        font-weight: bold;
        text-decoration: none;
    }
    .k-state-hover .movie-template a,
    .movie-template a:hover {
        color: #000000;
    }
</style>

</body>
</html>
...