Question

现在，我正在制定课程表的时间表。我的想法是仅将FullCalendar视图设置为agendaWeek并格式化其他内容。关于如何获取和添加事件的程序化方面是我不知道的，因为我不会对此实例使用任何日期。

这是日程表表：

| schedid | subjectcode | prof_id  | day     | start_time | end_time | duration | room |
-------------------------------------------------------------------------------------------
| 1       | TECHNO      | 16-00001 | Monday  | 11:00:00   | 14:00:00 | 3        | SL   |
| 2       | TECHNO      | 16-00001 | Tuesday | 10:30:00   | 13:30:00 | 3        | SL   |

这就是我想要实现的目标：

我已经阅读了文档，我读的越多，我就越无法弄清楚要做什么，我真的不知道如何实现这一点，因为FullCalendar依赖于日期。任何建议和帮助都将非常感激。

修改

这是我的FullCalendar脚本：

$(document).ready(function() {
    $("#add-sched").fullCalendar({
        header: false,
        columnFormat: 'dddd',
        allDaySlot: false,
        hiddenDays: [0],
        defaultView: 'agendaWeek',
        minTime: '07:00:00',
        maxTime: '21:00:00',
        editatble: true,
        events: [ // values will be coming from an ajax call so I'm just placing here what inputs I would like
            {
                title: 'Event',
                start: 'MondayT11:00:00', //what I would like to input
                end: 'MondayT11:00:00',
//                start: '2016-12-12T11:00:00',
//                end: '2016-12-12T14:00:00',
                editable: true
            }
        ]
    });
});

Answer 1

此表应该是HTML文档还是Excel文档？

最后我做了这个。

这里的HTML＆amp;＆amp;页面的JS代码：

<!DOCTYPE html>

<html>
<head>
<meta charset='utf-8' />
<link href='/something/fullcalendar.min.css' rel='stylesheet' />
<link href='/something/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='/something/lib/moment.min.js'></script>
<script src='/something/lib/jquery.min.js'></script>
<script src='/something/fullcalendar.min.js'></script>
<script>
    Date.prototype.getWeek = function(start)
    {
        //Calcing the starting point
    start = start || 0;
    var today = new Date(this.setHours(0, 0, 0, 0));
    var day = today.getDay() - start;
    var date = today.getDate() - day;

        // Grabbing Start/End Dates
    var StartDate = new Date(today.setDate(date));
    var EndDate = new Date(today.setDate(date + 6));
    return [StartDate, EndDate];
    }

    // test code
    var Dates = new Date().getWeek();
    for(i = 0; i < Dates.length; i++) {
        day = Dates[i].getDate();
        month = (Dates[i].getMonth()) + 1;
        year = Dates[i].getFullYear();

         Dates[i] = year + '-' + month + '-' + day;
    }


    $(document).ready(function() {

        $('#calendar').fullCalendar({
              header: false,
              columnFormat: 'dddd',
              allDaySlot: false,
              hiddenDays: [0],
              defaultView: 'agendaWeek',
              minTime: '07:00:00',
              maxTime: '21:00:00',
              editatble: true,
        });
        $.post( "getevents.php",
                {'getEvents': 1, 'startDate': Dates[0], 'endDate': Dates[1]},
                function(data) {
                    var array = JSON.parse(data);
                    for(i = 0; i < array.length; i ++) {
                        $('#calendar').fullCalendar( 'renderEvent', {
                            title: 'Sometitle',
                            start: array[i]['date']+'T'+array[i]['start_time'], //what I would like to input
                            end: array[i]['date']+'T'+array[i]['end_time'],
                        } );
                    }
                }
            );

    });

</script>
<style>

    body {
        margin: 40px 10px;
        padding: 0;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        font-size: 14px;
    }

    #calendar {
        max-width: 900px;
        margin: 0 auto;
    }

</style>
</head>
<body>

    <div id='calendar'></div>

</body>
</html>

这是getevents.php的PHP代码：

<?php
    $db = new mysqli('localhost', 'root', '', 'calendar'); // connection to db

    function formWeekDates($startDate, $endDate) {
        $startDay = getDay($startDate);
        $endDay = getDay($endDate);
        $tmp = explode('-', $startDate);

        $return = array();
        for($i = intval($startDay); $i <= intval($endDay); $i++) {
            if($i > 0 && $i < 10) {
                $i = '0'.$i;
            }
            $return[] = '\''.$tmp[0].'-'.$tmp[1].'-'.$i.'\'';
        }

        return $return;
    }

    function getDay($date) { //$date in format 'yyyy-mm-dd'
        return end(explode('-', $date));
    }
    if(isset($_POST['getEvents']) && isset($_POST['startDate']) && isset($_POST['endDate'])) {
        $startDate = $_POST['startDate'];
        $endDate = $_POST['endDate'];
        $dates = implode(',', formWeekDates($startDate, $endDate));
        $result = $db->query("SELECT * FROM `calendar` WHERE `date` IN ($dates)");
        $return = array();
        while($row = $result->fetch_assoc()) {
            $return[] = $row;
        }

        echo json_encode($return);
        // echo json_encode($dates);
    }
?>

我还添加了专栏＆＃39; date＆＃39;进入数据库，我以格式存储日期＆＃39; yyyy-mm-dd＆＃39;

P.S。这段代码可能有点迟钝，但它可以正常工作

P.S.S我看到你想要创建这个日历而不使用任何日期。但我没有找到任何办法。您可以隐藏用户的日期并在PHP代码中处理它们

Answer 2

如果我了解你的目标，你需要一周的静态日历。事件不会按日期变化，只会按日期名称进行更改。

所以我重写了以前的解决方案。在此变体中，形成的关联数组包含当前星期的日期和键是日期的名称。日期可以通过日期名称访问，因此您不需要在数据库中存储日期请看看这个。

HTML页面（非重要代码）：

<html>
<head>
<meta charset='utf-8' />
<link href='/something/fullcalendar.min.css' rel='stylesheet' />
<link href='/something/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='/something/lib/moment.min.js'></script>
<script src='/something/lib/jquery.min.js'></script>
<script src='/something/fullcalendar.min.js'></script>
<script src='/something/initCalendar.js'></script> <!-- Script with all important stuff-->
<style>
    body {
        margin: 40px 10px;
        padding: 0;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        font-size: 14px;
    }

    #calendar {
        max-width: 900px;
        margin: 0 auto;
    }

</style>
</head>
<body>

    <div id='calendar'></div>

</body>
</html>

initCalendar.js代码（最重要的部分）：

 Date.prototype.getDaysOfCurrentWeek = function(start)
    {
        // Array of all days of week
        var days = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

    // Calculates date of first day of current week
    start = start || 0;
    var today = new Date(this.setHours(0, 0, 0, 0));
    var day = today.getDay() - start;
    var date = today.getDate() - day;

    // Then we are calculating all dates of current week and then reformat them into ISOO
    var daysOfWeek = new Object();
    for(i = 0; i < 8; i++) {
        tmp = new Date(today.setDate(date+i));
        daysOfWeek[days[i]] = tmp.getFullYear()+'-'+(tmp.getMonth()+1)+'-'+tmp.getDate();
    }

    return daysOfWeek;
}


var days = new Date().getDaysOfCurrentWeek(); // gets array like ('nameOfDay' => 0000-00-00)
$(document).ready(function(){
    $('#calendar').fullCalendar({
          header: false,
          columnFormat: 'dddd',
          allDaySlot: false,
          hiddenDays: [0],
          defaultView: 'agendaWeek',
          minTime: '07:00:00',
          maxTime: '21:00:00',
          editatble: true,
    });
    $.post( "getevents2.php",
            {'getEvents': 1},
            function(data) {
                var array = JSON.parse(data);
                for(i = 0; i < array.length; i++) {
                    $('#calendar').fullCalendar( 'renderEvent', {
                        title: 'Sometitle',
                        start: days[array[i]['day']]+'T'+array[i]['start_time'], // here we are setting needed date from array 'days' by day's name which we got from database
                        end: days[array[i]['day']]+'T'+array[i]['end_time']     // here's the same
                    } );
                }
            }
    );
});

getevents2.php的PHP代码：

if(isset($_POST['getEvents'])) {
    $result = $db->query("SELECT * FROM `calendar`");
    $return = array();
    while($row = $result->fetch_assoc()) {
        $return[] = $row;
    }

    echo json_encode($return);
}

这就是你需要的吗？或者我又错了？

使用不带日期的FullCalendar

2 个答案: