Question

我正在尝试使用完整日历组件在议程日视图中显示3天或最终使用垂直资源视图。

我尝试使用示例自定义视图但没有运气。

是否有可能在白天视图中显示3天，一个低于另一个？

我正在使用这个构造函数，但我不希望这些日子彼此相邻，而是在彼此之下。

                <table id="myTable" class=" table order-list">
                <thead>
                <tr>
                    <td>{{Form::label('Payment', 'پرداخت')}}</td>
                    <td>{{Form::label('PaymentDate', 'تاریخ')}}</td>
                    <td>{{Form::label('Account', 'حساب')}}</td>
                    <td>{{Form::label('Attachment_link', 'تصویر پرداخت')}}</td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td class="col-md-2">
                        {{Form::text('pay[]', '', ['class' => 'form-control number', 'placeholder' => ''])}}
                    </td>
                    <td class="col-md-2">
                        {{Form::text('payDate[]', '', ['class' => 'form-control pDate', 'placeholder' => ''])}}
                    </td>
                    <td class="col-md-2">
                        <select name="account[]" class="form-control selectpicker">
                            <option></option>
                            <option>دفتر وکالت</option>
                            <option>دفتر موسسه</option>
                        </select>
                    </td>
                    <td class="col-md-1">
                        {{Form::file('attachment_link[]')}}
                    </td>
                    <td class="col-md-2"><a class="deleteRow"></a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="5" style="text-align: left;">
                        <input type="button" class="btn btn-lg btn-block btn-primary" id="addrow" value="اضافه کردن پرداخت جدید" />
                    </td>
                </tr>
                <tr>
                </tr>
                </tfoot>
            </table>

Answer 1

您无法在议程样式视图中显示彼此下面的日期，没有。它的整个布局方案是水平定向的。您可以在正常的议程风格中轻松地并排显示它们。

Scheduler插件提供的垂直资源视图与议程视图基本相同，但每天将每个指定的资源拆分为子列。

如果您希望将天数显示在另一个之下，则唯一的选择是“列表”式视图。这会垂直显示，但你会失去时间网格。

此代码将实现具有3天跨度的两种类型的视图，因此您可以看到差异：

views: {
  agendaThreeDay: {
    type: 'agenda',
    duration: {
      days: 3
    },
    buttonText: '3 day agenda'
  },
  listThreeDay: {
    type: 'list',
    duration: {
      days: 3
    },
    buttonText: '3 day list'
  }
},

这是一个有效的演示：http://jsfiddle.net/sbxpv25p/104/

如果这些都不满足您的需求，那么您唯一的另一个选择就是创建一个完全自定义的视图类型（请参阅本文档页面的后半部分：https://fullcalendar.io/docs/views/Custom_Views/）。这是一项复杂而耗时的任务，所以在开始这样的事情之前，你应该考虑一种内置类型的视图是否真的令人满意 - 它们确实向用户传达了必要的信息，这是主要目的日历，即使它不完全符合你想象的布局。

Answer 2

为了在日程视图（日）中显示多天，只需添加 - 和+您想要的小时数...例如 - 提前一天-24 H，选定日期后一天+24 H.像这样：

  views: {

    firstView: {
      type: 'agendaDay',
      minTime: '-12:00:00',
    maxTime: '36:00:00',
    slotDuration: '00:30:00',
            },

  }

Answer 3

views: {
      timeGridFourDay: {
        type: 'timeGrid',
        duration: { days: 4 },
        buttonText: '4 day'
      }
    },

并将其添加到标题：

header: {
      left: 'prev,next',
      center: 'title',
      right: '.....,timeGridFourDay'
    },

https://fullcalendar.io/docs/custom-views

在Fullcalendar日视图中显示超过1天

3 个答案: