Question

我目前正在使用网络应用程序，因此想嵌入日历。我选择了fullcalendar 4，因为它看起来不错，我只想用它来显示事件。我设置了日历，并根据全日历通过ajax从服务器端获取的json向用户显示事件。

一切正常，但是我的问题是大多数事件都是多天事件，我不喜欢allDay选项的默认行为。您可能知道，它只有2个选项true或false。我希望日历在活动的第一天和最后一天之间全天显示我的多日活动。但是我的问题来了。那第一天和最后一天呢？它也将显示为全天活动，我不希望这样。我希望开始日期仅从真正开始的时间开始显示，并且还显示最后一个日期的结束时间。现在，如果我将allDay设置为false，但我猜怎么着，就可以实现这一目标。现在，中间的日期不再显示为全天活动，并且浪费了日历。

我认为可能为期望的行为提供了“自动”选项，但事实证明，没有这种事情（据我所知）。也许有些js / fullcalendar专家可以在这里帮助我。

我并不是要在月视图中显示多日活动的结束时间，我想要的是进入日视图或周视图时可以看到第一天从真正开始的那一天到最后一天应该到那个特定事件的结束时间为止。

我确实有一个可能的解决方案的主意。将长于一天的事件分成2或3个事件，如果长于2天，则将中间天/天设置为allDay：其余时间为true和false。

您怎么看？我是在正确的道路上还是有更好的解决方案？

我真的不希望在每个长事件上都将allDay设置为false，因为即使在每周和每天的视图中，它们也会使用户的日历充满长行。

更新 JS：

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: ['dayGrid', 'timeGrid'],
        header: {
            left: 'title',
            center: 'dayGridMonth,timeGridWeek,timeGridDay',
            right: 'prev,next today'
        },
        navLinks: true,
        nowIndicator: true,
        height: "parent",
        slotLabelFormat: {
            hour: '2-digit',
            minute: '2-digit',
            hour12: false
        },
        events: '/includephp/calendarjsonstream.php',
        displayEventTime: false,
        eventTimeFormat: {
            hour: '2-digit',
            minute: '2-digit',
            hour12: false
        },
        allDaySlot: false


    });

    calendar.render();

});

PHP类（在calendarjsonstream.php中调用函数）

public static function calendarJsonStream($userid, $subdomain) {
        $dbinfo = new dbinfo();
        $conn = $dbinfo->connect();
        $sql = "mysecretsqlquery";


        $query = $conn->prepare($sql);

        $query->execute(array(
           ':userid' => $userid,
           ':companyname' => $subdomain
        ));
        $result = $query->fetchAll();
        if (count($result) < 1) {
            $data[] = array('rowcount' => 0);
        } else {
            $counter = 0;
            foreach ($result as $row) {
                $counter++;
                if ($row['start_date'] === null) {
                    $eventStartDate = $row['submit_date'];

                } else {
                    $eventStartDate = $row['start_date'];
                }
                if ($row['importance'] === 'important') {
                    $eventBackgroundColor = "red";
                } else {
                    $eventBackgroundColor = "blue";
                }


                $data[] = array(
                    'id' => 'modal-button' . $counter,
                    'title' => $row['title'],
                    'start' => $eventStartDate . 'Z', //Z is for UTC time
                    'end' => $row['end_date'] . 'Z',
                    'classNames' => array('open-options-calendar', 'button', 'modal-button' . $counter),
                    'backgroundColor' => $eventBackgroundColor,
                    'borderColor' => $eventBackgroundColor,
                    'allDay' => false

                );

            }
        }
        echo json_encode($data);
    }

旁注：我稍微修改了fullcalednar的main.js文件，以便我可以从数据库中提取每个事件，并且当用户单击下个月的按钮时，它将停止向服务器发送ajax请求。

当前，我将所有事件设置为allDay：false。与将长事件显示为allDay相比，这对我来说还是一个更好的选择，因为这样，事件的第一天和最后一天也将显示为allDay，而实际上它们可以在下午某个地方开始，比如说

有没有办法在FullCalendar 4中修改一个多日事件以这样显示？

0 个答案: