完整日历自定义视图自定义

时间:2016-05-05 11:51:43

标签: fullcalendar

如何自定义完整的日历视图,因为他们提到了以下网址http://fullcalendar.io/docs/views/Custom_Views/我无法获得任何示例如何从头开始自定义,任何示例都是适当的

1 个答案:

答案 0 :(得分:1)

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input data-bind="value: array()[0]" />
<input data-bind="value: array()[1]" />
<input data-bind="value: array()[2]" />
<p data-bind="text: text"></p>

<!-- EDIT: this does not create a two way binding
<div data-bind="foreach: array">
  <input data-bind="value: $data" />
</div>
 -->

<!-- EDIT: this does work -->
<div data-bind="foreach: array">
  <input data-bind="value: $parent.array()[$index()]" />
</div>

<p data-bind="text: reducedText"></p>

并初始化

 fcViews.weekList = WeekListView;

    // Store defaults here so we don't have to modify defaults.js
    defaults.titleFormat.weekList = "MMM d[ yyyy]{ '&#8212;'[ MMM] d yyyy}";
    defaults.columnFormat.weekList = 'MMM d, yyyy';
    defaults.buttonText.weekList = 'week';

    function WeekListView(element, calendar) {
      var t = this;

      // exports
      t.render = render;

      // imports
      ListView.call(t, element, calendar, 'weekList');
      var opt = t.opt;
      var renderList = t.renderList;
      var skipHiddenDays = t.skipHiddenDays;
      var getCellsPerWeek = t.getCellsPerWeek;
      var formatDates = calendar.formatDates;



  function render(date, delta) {

    if (delta) {
        addDays(date, delta * 7);
    }

    var start = addDays(cloneDate(date), -((date.getDay() - opt('firstDay') + 7) % 7));
    var end = addDays(cloneDate(start), 7);

    var visStart = cloneDate(start);
    skipHiddenDays(visStart);

    var visEnd = cloneDate(end);
    skipHiddenDays(visEnd, -1, true);

    var rowCnt = getCellsPerWeek();

    t.start = start;
    t.end = end;
    t.visStart = visStart;
    t.visEnd = visEnd;

    t.title = formatDates(
      visStart,
      addDays(cloneDate(visEnd), -1),
      opt('titleFormat')
    );

    renderList(rowCnt);
  }

}

参考这个小提琴:

http://jsfiddle.net/nomatteus/dVGN2/3/

相关问题