简体   繁体   English

如何在全日历中自定义带有不同日期和不同小时的周末日期

[英]how to customise weekend dates with differnt dates and with differnts hours in full calendar

I want to show calendar in month view with an row wise date eg: today date 2018-sep-05 ,I would to show in calendar. 我想以逐行日期在月视图中显示日历,例如:今天date 2018-sep-05 ,我要在日历中显示。

2018-9-05,
2018-9-12,
2018-9-19
2018-9-26,

As I have done in week view jsfidddle in this is fine, 正如我在周视图jsfidddle中所做的那样 ,这很好,
I want to do same as weekday view jsfidddle2 , but, here comes my problem with dow, here dow is 3 means Wednesday, I want to show 5,12,19,26 dates with same dow and in different timings . 我想做与工作日视图jsfidddle2相同的操作 ,但是,这里出现我的dow问题,这里dow是3表示星期三,我想显示具有相同dow和不同时间的5 ,12,19,26日期。
All I want to below timing should fit in calendar 我想在计时以下的所有内容都适合日历

sep05 07am - 09pm, 
sep12 08am - 14pm,
sep19 10am - 13pm,


Is their any way to make it or any trick way. 是他们以任何方式实现目标还是以任何技巧。

     var hiddenDaysObj = [0, 1, 2, 3, 4, 5, 6];
        hiddenDaysObj.splice(selDate.getDay(), 1);
  const calObj = {
          defaultView: 'settimana',
          defaultDate: this.cldDate,
          editable: true,
          selectable: true,
          eventLimit: true,
          allDaySlot: false,
          minTime: '07:00',
          maxTime: '22:00',
          slotDuration: '00:10:00',
          slotLabelInterval: '00:15:00',
          weekends: true,
          header: {
            left: '',
            center: '',
            right: '',
          },
          slotLabelFormat: [
            'h(:mm) a'
          ],
          viewRender: function (view, element) {
            const s = '<div class="appnt-pro-name"><h6>TIME</h6> </div>';
            element.find('.fc-axis:eq(1)').html(s);
          },

          views: {
            settimana: {
              type: 'agendaWeek',
              duration: {
                months: 1
              },
              title: 'agendaWeek',
              groupByResource: true,
              columnFormat: 'ddd M/D',
            },
          },
          resources: resources,
          events: events,
          select: select,
       hiddenDays: hiddenDaysObj,
          schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source'

Finally I have done with this https://fullcalendar.io/docs/background-events I have pushed the date and time with in events. 最后,我已经完成了这个https://fullcalendar.io/docs/background-events,我已经将in和事件的日期和时间进行了推送。 I have got according to my scenario and thanks @ADyson 我有根据我的情况,并感谢@ADyson
here is the example finalresult jsfiddle 这是示例finalresult jsfiddle

events.push({id:1,
color:"gray",
start:"2018-09-05T10:00",
end:"2018-09-05T19:00",
rendering:"inverse-background",
},{
id:1,
color:"gray",
start:"2018-09-12T08:00",
end:"2018-09-12T13:00",
rendering:"inverse-background",
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM