Fullcalendar 完整日历周视图：资源位于顶部，时间槽位于左轴_Fullcalendar

Fullcalendar 完整日历周视图：资源位于顶部，时间槽位于左轴

fullcalendar

Fullcalendar 完整日历周视图：资源位于顶部，时间槽位于左轴,fullcalendar,Fullcalendar,我正在使用fullcalendar-2.6.0和fullcalendar-scheduler-1.2.0 下面是我的代码： $('#calendar').fullCalendar({ resourceAreaWidth: 230, now: '2016-02-15', lang: 'fr', editable: true, aspectRatio: 1.5, scrollTime: '00:00', header: { left

我正在使用fullcalendar-2.6.0和fullcalendar-scheduler-1.2.0

下面是我的代码：

$('#calendar').fullCalendar({
    resourceAreaWidth: 230,
    now: '2016-02-15',
    lang: 'fr',
    editable: true,
    aspectRatio: 1.5,
    scrollTime: '00:00',
    header: {
      left: 'promptResource today prev,next',
      center: 'title',
    },
    customButtons: {
      promptResource: {
        text: '+ room',
        click: function() {
          var title = prompt('Room name');
          if (title) {
            $('#calendar').fullCalendar(
              'addResource',
              { title: title },
              true // scroll to the new resource?
            );
          }
        }
      }
    },
    defaultView: 'timelineWeek',
    views: {
      timelineWeek: {
        slotDuration: { days: 1 }
      }
    },
    resourceLabelText: 'PK',
    resources: [
      { id: 'a', title: '163+000' },
      { id: 'b', title: '164+000', eventColor: 'green' },
      { id: 'c', title: '165+000', eventColor: 'orange' },
      { id: 'd', title: '166+000' },
      { id: 'e', title: '167+000' },
      { id: 'f', title: '168+000', eventColor: 'red' },
      { id: 'g', title: '169+000' },
      { id: 'h', title: '170+000' },
      { id: 'i', title: '171+000' },
      { id: 'j', title: '172+000' },
      { id: 'k', title: '173+000' },
      { id: 'l', title: '174+000' }
    ],
    events: [
      { id: '1', resourceId: 'b', start: '2016-02-15', end: '2016-02-16', title: 'event 1' },
      { id: '2', resourceId: 'c', start: '2016-02-15', end: '2016-02-17', title: 'event 2' },
      { id: '3', resourceId: 'd', start: '2016-02-16', end: '2016-02-17', title: 'event 3' },
      { id: '4', resourceId: 'e', start: '2016-02-17', end: '2016-02-18', title: 'event 4' },
      { id: '5', resourceId: 'f', start: '2016-02-18', end: '2016-02-19', title: 'event 5' }
    ]
  });

            $('#calendar').fullCalendar({
            defaultView: 'week',
            defaultDate: '2016-02-15',
            now: '2016-02-16',
            lang: 'fr',
            editable: true,
            selectable: true,
            eventLimit: true,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'week'
            },
            views: {
                week: {
                    type: 'agenda',
                    duration: { days: 7 },
                    groupByResource: true
                }
            },

            //// uncomment this line to hide the all-day slot
            allDaySlot: false,
            events: [
                { id: '1', resourceId: 'a', start: '2016-02-16', end: '2016-02-17', title: 'event 1' },
                { id: '2', resourceId: 'a', start: '2016-02-18', end: '2016-02-19', title: 'event 2' },
                { id: '3', resourceId: 'b', start: '2016-02-18', end: '2016-02-20', title: 'event 3' },
                { id: '4', resourceId: 'c', start: '2016-02-18', end: '2016-02-19', title: 'event 4' },
                { id: '5', resourceId: 'd', start: '2016-02-17', end: '2016-02-18', title: 'event 5' }
            ],

            resources: function (callBack) {
                callBack([
                    { id: 'a', title: '163+000', altTitle: '163+000' },
                    { id: 'b', title: '164+000', altTitle: '164+000' , eventColor: 'green' },
                    { id: 'c', title: '165+000', altTitle: '165+000' , eventColor: 'orange' },
                    { id: 'd', title: '166+000', altTitle: '166+000' , eventColor: 'red' }
                ]);
            },
            resourceRender: function (dataTds, eventTd) {
                console.log('resourcerender');
                console.log(eventTd);
                console.log(dataTds);
                var textElement = eventTd.empty();
                textElement.append('<b>' + dataTds.altTitle + '</b>');
            },
        });

结果是：

我需要在顶部有资源，在左轴上有时隙

非常感谢您的帮助。

将

defaultView

属性设置为

agendaDay

例如

defaultView: 'agendaDay';

将

defaultView

属性设置为

agendaDay

例如

defaultView: 'agendaDay';

我读了你刚发给我的链接。下面是我的代码：

$('#calendar').fullCalendar({
    resourceAreaWidth: 230,
    now: '2016-02-15',
    lang: 'fr',
    editable: true,
    aspectRatio: 1.5,
    scrollTime: '00:00',
    header: {
      left: 'promptResource today prev,next',
      center: 'title',
    },
    customButtons: {
      promptResource: {
        text: '+ room',
        click: function() {
          var title = prompt('Room name');
          if (title) {
            $('#calendar').fullCalendar(
              'addResource',
              { title: title },
              true // scroll to the new resource?
            );
          }
        }
      }
    },
    defaultView: 'timelineWeek',
    views: {
      timelineWeek: {
        slotDuration: { days: 1 }
      }
    },
    resourceLabelText: 'PK',
    resources: [
      { id: 'a', title: '163+000' },
      { id: 'b', title: '164+000', eventColor: 'green' },
      { id: 'c', title: '165+000', eventColor: 'orange' },
      { id: 'd', title: '166+000' },
      { id: 'e', title: '167+000' },
      { id: 'f', title: '168+000', eventColor: 'red' },
      { id: 'g', title: '169+000' },
      { id: 'h', title: '170+000' },
      { id: 'i', title: '171+000' },
      { id: 'j', title: '172+000' },
      { id: 'k', title: '173+000' },
      { id: 'l', title: '174+000' }
    ],
    events: [
      { id: '1', resourceId: 'b', start: '2016-02-15', end: '2016-02-16', title: 'event 1' },
      { id: '2', resourceId: 'c', start: '2016-02-15', end: '2016-02-17', title: 'event 2' },
      { id: '3', resourceId: 'd', start: '2016-02-16', end: '2016-02-17', title: 'event 3' },
      { id: '4', resourceId: 'e', start: '2016-02-17', end: '2016-02-18', title: 'event 4' },
      { id: '5', resourceId: 'f', start: '2016-02-18', end: '2016-02-19', title: 'event 5' }
    ]
  });

            $('#calendar').fullCalendar({
            defaultView: 'week',
            defaultDate: '2016-02-15',
            now: '2016-02-16',
            lang: 'fr',
            editable: true,
            selectable: true,
            eventLimit: true,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'week'
            },
            views: {
                week: {
                    type: 'agenda',
                    duration: { days: 7 },
                    groupByResource: true
                }
            },

            //// uncomment this line to hide the all-day slot
            allDaySlot: false,
            events: [
                { id: '1', resourceId: 'a', start: '2016-02-16', end: '2016-02-17', title: 'event 1' },
                { id: '2', resourceId: 'a', start: '2016-02-18', end: '2016-02-19', title: 'event 2' },
                { id: '3', resourceId: 'b', start: '2016-02-18', end: '2016-02-20', title: 'event 3' },
                { id: '4', resourceId: 'c', start: '2016-02-18', end: '2016-02-19', title: 'event 4' },
                { id: '5', resourceId: 'd', start: '2016-02-17', end: '2016-02-18', title: 'event 5' }
            ],

            resources: function (callBack) {
                callBack([
                    { id: 'a', title: '163+000', altTitle: '163+000' },
                    { id: 'b', title: '164+000', altTitle: '164+000' , eventColor: 'green' },
                    { id: 'c', title: '165+000', altTitle: '165+000' , eventColor: 'orange' },
                    { id: 'd', title: '166+000', altTitle: '166+000' , eventColor: 'red' }
                ]);
            },
            resourceRender: function (dataTds, eventTd) {
                console.log('resourcerender');
                console.log(eventTd);
                console.log(dataTds);
                var textElement = eventTd.empty();
                textElement.append('<b>' + dataTds.altTitle + '</b>');
            },
        });

$（“#日历”）.fullCalendar({
defaultView:“周”，
默认日期：“2016-02-15”，
现在：“2016-02-16”，
朗：“fr”，
是的，
是的，
eventLimit：对，
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“一周”
},
观点：{
周：{
键入：“议程”，
持续时间：{天：7}，
groupByResource：对
}
},
////取消对此行的注释以隐藏全天时段
全天时段：错，
活动：[
{id:'1'，resourceId:'a'，开始：'2016-02-16'，结束：'2016-02-17'，标题：'event 1'}，
{id:'2'，resourceId:'a'，开始：'2016-02-18'，结束：'2016-02-19'，标题：'event 2'}，
{id:'3'，resourceId:'b'，开始：'2016-02-18'，结束：'2016-02-20'，标题：'event 3'}，
{id:'4'，resourceId:'c'，开始：'2016-02-18'，结束：'2016-02-19'，标题：'event 4'}，
{id:'5'，resourceId:'d'，开始：'2016-02-17'，结束：'2016-02-18'，标题：'event 5'}
],
资源：函数（回调）{
回拨([
{id:'a'，title:'163+000'，altTitle:'163+000'}，
{id:'b'，title:'164+000'，altTitle:'164+000'，eventColor:'green'}，
{id:'c'，title:'165+000'，altTitle:'165+000'，eventColor:'orange'}，
{id:'d'，title:'166+000'，altTitle:'166+000'，eventColor:'red'}
]);
},
resourceRender:函数（dataTds、eventTd）{
console.log（'resourcerender'）；
console.log（eventTd）；
console.log（dataTds）；
var textElement=eventTd.empty（）；
textElement.append（“”+dataTds.altTitle+“”）；
},
});

结果如下：

结果比以前好多了，但我仍然需要在左边休息几天，而不是几个小时。我不需要在顶端呆上几天

再次感谢您的帮助。

我阅读了您刚刚发给我的链接。下面是我的代码：

$('#calendar').fullCalendar({
    resourceAreaWidth: 230,
    now: '2016-02-15',
    lang: 'fr',
    editable: true,
    aspectRatio: 1.5,
    scrollTime: '00:00',
    header: {
      left: 'promptResource today prev,next',
      center: 'title',
    },
    customButtons: {
      promptResource: {
        text: '+ room',
        click: function() {
          var title = prompt('Room name');
          if (title) {
            $('#calendar').fullCalendar(
              'addResource',
              { title: title },
              true // scroll to the new resource?
            );
          }
        }
      }
    },
    defaultView: 'timelineWeek',
    views: {
      timelineWeek: {
        slotDuration: { days: 1 }
      }
    },
    resourceLabelText: 'PK',
    resources: [
      { id: 'a', title: '163+000' },
      { id: 'b', title: '164+000', eventColor: 'green' },
      { id: 'c', title: '165+000', eventColor: 'orange' },
      { id: 'd', title: '166+000' },
      { id: 'e', title: '167+000' },
      { id: 'f', title: '168+000', eventColor: 'red' },
      { id: 'g', title: '169+000' },
      { id: 'h', title: '170+000' },
      { id: 'i', title: '171+000' },
      { id: 'j', title: '172+000' },
      { id: 'k', title: '173+000' },
      { id: 'l', title: '174+000' }
    ],
    events: [
      { id: '1', resourceId: 'b', start: '2016-02-15', end: '2016-02-16', title: 'event 1' },
      { id: '2', resourceId: 'c', start: '2016-02-15', end: '2016-02-17', title: 'event 2' },
      { id: '3', resourceId: 'd', start: '2016-02-16', end: '2016-02-17', title: 'event 3' },
      { id: '4', resourceId: 'e', start: '2016-02-17', end: '2016-02-18', title: 'event 4' },
      { id: '5', resourceId: 'f', start: '2016-02-18', end: '2016-02-19', title: 'event 5' }
    ]
  });

            $('#calendar').fullCalendar({
            defaultView: 'week',
            defaultDate: '2016-02-15',
            now: '2016-02-16',
            lang: 'fr',
            editable: true,
            selectable: true,
            eventLimit: true,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'week'
            },
            views: {
                week: {
                    type: 'agenda',
                    duration: { days: 7 },
                    groupByResource: true
                }
            },

            //// uncomment this line to hide the all-day slot
            allDaySlot: false,
            events: [
                { id: '1', resourceId: 'a', start: '2016-02-16', end: '2016-02-17', title: 'event 1' },
                { id: '2', resourceId: 'a', start: '2016-02-18', end: '2016-02-19', title: 'event 2' },
                { id: '3', resourceId: 'b', start: '2016-02-18', end: '2016-02-20', title: 'event 3' },
                { id: '4', resourceId: 'c', start: '2016-02-18', end: '2016-02-19', title: 'event 4' },
                { id: '5', resourceId: 'd', start: '2016-02-17', end: '2016-02-18', title: 'event 5' }
            ],

            resources: function (callBack) {
                callBack([
                    { id: 'a', title: '163+000', altTitle: '163+000' },
                    { id: 'b', title: '164+000', altTitle: '164+000' , eventColor: 'green' },
                    { id: 'c', title: '165+000', altTitle: '165+000' , eventColor: 'orange' },
                    { id: 'd', title: '166+000', altTitle: '166+000' , eventColor: 'red' }
                ]);
            },
            resourceRender: function (dataTds, eventTd) {
                console.log('resourcerender');
                console.log(eventTd);
                console.log(dataTds);
                var textElement = eventTd.empty();
                textElement.append('<b>' + dataTds.altTitle + '</b>');
            },
        });

$（“#日历”）.fullCalendar({
defaultView:“周”，
默认日期：“2016-02-15”，
现在：“2016-02-16”，
朗：“fr”，
是的，
是的，
eventLimit：对，
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“一周”
},
观点：{
周：{
键入：“议程”，
持续时间：{天：7}，
groupByResource：对
}
},
////取消对此行的注释以隐藏全天时段
全天时段：错，
活动：[
{id:'1'，resourceId:'a'，开始：'2016-02-16'，结束：'2016-02-17'，标题：'event 1'}，
{id:'2'，resourceId:'a'，开始：'2016-02-18'，结束：'2016-02-19'，标题：'event 2'}，
{id:'3'，resourceId:'b'，开始：'2016-02-18'，结束：'2016-02-20'，标题：'event 3'}，
{id:'4'，resourceId:'c'，开始：'2016-02-18'，结束：'2016-02-19'，标题：'event 4'}，
{id:'5'，resourceId:'d'，开始：'2016-02-17'，结束：'2016-02-18'，标题：'event 5'}
],
资源：函数（回调）{
回拨([
{id:'a'，title:'163+000'，altTitle:'163+000'}，
{id:'b'，title:'164+000'，altTitle:'164+000'，eventColor:'green'}，
{id:'c'，title:'165+000'，altTitle:'165+000'，eventColor:'orange'}，
{id:'d'，title:'166+000'，altTitle:'166+000'，eventColor:'red'}
]);
},
resourceRender:函数（dataTds、eventTd）{
console.log（'resourcerender'）；
console.log（eventTd）；
console.log（dataTds）；
var textElement=eventTd.empty（）；
textElement.append（“”+dataTds.altTitle+“”）；
},
});

结果如下：

结果比以前好多了，但我仍然需要在左边休息几天，而不是几个小时。我不需要在顶端呆上几天

再次感谢您的帮助。

谢谢。我就这么做了。资源添加在顶部。但是时间段是小时而不是天…我需要有一个星期视图DefaultView:'agendaDay'；提供一天的视图，而我正在寻找整个星期的视图。请参阅以下链接以获取更多信息<代码>http://fullcalendar.io/docs/vertical_resource_view/groupByDateAndResource/谢谢。我就这么做了。资源添加在顶部。但是时间段是小时而不是天…我需要有一个星期视图DefaultView:'agendaDay'；提供一天的视图，而我正在寻找整个星期的视图。请参阅以下链接以获取更多信息<代码>http://fullcalendar.io/docs/vertical_resource_view/groupByDateAndResource/