如何使用不同日期自定义周末日期,并在完整日历中使用不同的小时数

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用不同日期自定义周末日期,并在完整日历中使用不同的小时数相关的知识,希望对你有一定的参考价值。

我希望在月视图中显示日历,并显示行日期,例如:今天日期2018-sep-05,我将在日历中显示。

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

正如我在周视图中所做的那样jsfidddle在这方面很好, 我想和平日视图jsfidddle2一样,但是,这里有我的dow问题,这里dow是3表示星期三,我想用相同的dow和不同的时间显示5,12,19,26个日期。 所有我想要的时间都应该适合日历

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

他们是以任何方式制作它或任何特技方式。

     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'
答案

最后我已经完成了这个https://fullcalendar.io/docs/background-events我已经在事件中推动了日期和时间。根据我的情况,我得到了@ADyson 这是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",
});

以上是关于如何使用不同日期自定义周末日期,并在完整日历中使用不同的小时数的主要内容,如果未能解决你的问题,请参考以下文章

从日期计算中排除周末和自定义日期(即假期)

如何在 jQuery 日历或 Angular Js 日历中将当前周末日期设置为默认日期。星期在星期日结束

如何在自定义drupal窗体中使用日期弹出日历

如何禁用日历中的未来日期? [复制]

如何自定义 Pandas 日期时间戳@ x 轴

如何在 jquery ui 日期选择器中同时禁用周末和选定日期?