fullcalendar - FullCalendar - 垂直时间线，水平天数

Question

我想知道，是否有任何方法可以使用 FullCalendar 以这种格式创建日历：

我以日期的形式形成了 reusers。但我只在一天内看到事件。可以纠正事件。但也许有一种方法可以以这种格式显示所有的日子。

先感谢您！

暂时，我以这种方式解决了这个问题：

 <div class="panel-body">
      <div id="calendar"></div>
 </div>

@section Styles {
    <link href="~/lib/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet" />
    <link href="~/lib/fullcalendar-scheduler/dist/scheduler.min.css" rel="stylesheet" />
}
@section Scripts {
    <script src="~/lib/moment/moment.js"></script>
    <script src="~/lib/fullcalendar/dist/fullcalendar.min.js"></script>
    <script src="~/lib/fullcalendar/dist/locale/ru.js"></script>
    <script src="~/lib/fullcalendar-scheduler/dist/scheduler.min.js"></script>
    <script>
        $(function () {
                $('#calendar').fullCalendar({
                    defaultView: 'timelineDay',
                    slotDuration: '00:30',
                    slotWidth: 5,
                    height: 'auto',
                    eventOverlap: false,
                    nowIndicator: true,
                    businessHours: true,
                    defaultDate: "@DateTime.Now.ToString("yyyy-MM")-01",
                    titleFormat: 'MMMM YYYY',
                    header: {
                        left: 'myPrevButton,myNextButton',
                        center: 'title',
                        right: ''
                    },
                    customButtons: {
                        myNextButton: {
                            //text: 'Next',
                            icon: 'right-single-arrow',
                            click: function () {
                                $('#calendar').fullCalendar('incrementDate', {
                                    months: 1,                                    
                                });
                                $('#calendar').fullCalendar('refetchResources');                                
                            }
                        },
                        myPrevButton: {
                            //text: 'Prev',
                            icon: 'left-single-arrow',
                            click: function () {
                                $('#calendar').fullCalendar('incrementDate', {
                                    months: -1,
                                });
                                $('#calendar').fullCalendar('refetchResources');                                
                            }
                        }
                    },
                    events: "/api/Sheduling/eventpersonal/@Model.Id",
                    refetchResourcesOnNavigate: true,
                    resources: '/api/Sheduling/1'
                });
        });
    </script>
}

这个解决方案对我有用。但它需要多余的操作。这个解决方案对我有用。但它需要多余的操作。我收到一名员工的时间表，格式如下：

资源：

[{"id":1,"title":"1/8"},{"id":2,"title":"2/8"},{"id":3,"title":"3/8"},{"id":4,"title":"4/8"},{"id":5,"title":"5/8"},{"id":6,"title":"6/8"}, ....

事件（所有开始于结束日期为该月的第一天，resourceId 为该月的日期）：

[{"color":"#006633","id":1,"resourceId":1,"start":"2018-08-01T10:05:00","end":"2018-08-01T10:09:50"},{"color":"#006633","id":1,"resourceId":1,"start":"2018-08-01T10:35:00","end":"2018-08-01T10:39:50"},{"color":"#006633","id":1,"resourceId":1,"start":"2018-08-01T11:05:00","end":"2018-08-01T11:09:50"},{"color":"#006633","id":1,"resourceId":1,"start":"2018-08-01T11:35:00","end":"2018-08-01T11:39:50"},{"color":"#006633","id":1,"resourceId":1,"start":"2018-08-01T12:05:00","end":"2018-08-01T12:09:50"},{"color":"#006633","id":1,"resourceId":1,"start":"2018-08-01T12:35:00","end":"2018-08-01T12:39:50"},{"color":"#006633","id":1,"resourceId":1,"start":"2018-08-01T13:05:00","end":"2018-08-01T13:09:50"},{"color":"#006633","id":1,"resourceId":1,"start":"2018-08-01T13:35:00","end":"2018-08-01T13:39:50"},{"color":"#006633","id":1,"resourceId":1,"start":"2018-08-01T14:05:00","end":"2018-08-01T14:09:50"},{"color":"#006633","id":1,"resourceId":1,"start":"2018-08-01T14:35:00","end":"2018-08-01T14:39:50"}, ....

标签： fullcalendar