点击网站在Fullcalendar上添加活动?

时间:2016-06-07 19:58:37

标签: jquery fullcalendar

我一直在网上搜索,似乎找不到任何东西。所以具体来说,我想在你点击当天创建一个事件。事件中的信息需要是:标题,事件开始和事件结束。

到目前为止,我有:

@section scripts {             

            $(document).ready(function () {
                var date = new Date();
                var d = date.getDate();
                var m = date.getMonth();
                var y = date.getFullYear();
                var calendar = $('#calendar').fullCalendar({
                    theme: true,
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month, agendaWeek, agendaDay'
                    },
                    defaultView: 'month',
                    editable: true,
                    allDaySlot: false,
                    selectable: true,
                    slotMinutes: 15,
                    //events: "/home/getevents/"
                    select: function(start, end, allDay)
                    {

                        var title = prompt('Event Title:');
                        var start = prompt('Event Start:');
                        var end = prompt('Event End:');

                        if (title)
                        {
                            calendar.fullCalendar('renderEvent',
                                {
                                    title: title,
                                    start: start,
                                    end: end,
                                    allDay: allDay
                                },
                                true
                            );
                        }
                        calendar.fullCalendar('unselect');
                    },

                    editable: true,

                    events: [

                    ]
                });

            });

1 个答案:

答案 0 :(得分:1)

经过几个小时的修补,没有外界的帮助,我终于得到了事件来展示我需要他们的方式。我将发布下面的代码,所以希望没有人会像我一样经历这个。

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
</head>
<body>
    <div>

        <h2>Appointments</h2>

        @section scripts{
            <script type="text/javascript">
                $(document).ready(function () {
                    var date = new Date();
                    var d = date.getDate();
                    var m = date.getMonth();
                    var y = date.getFullYear();
                    var calendar = $('#calendar').fullCalendar({
                        theme: true,
                        header: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'month, agendaWeek, agendaDay'
                        },
                        defaultView: 'month',
                        editable: true,
                        allDaySlot: false,
                        selectable: true,
                        slotMinutes: 15,
                        select: function(start, end, allDay)
                        {
                            var title = prompt('Event Title:');
                            if (title)
                            {
                                var startHour = prompt('enter start time')
                                var startMinute = prompt('enter the minutes. example: 12:15 would be 15')
                                var endTime = prompt('enter end time')
                                var dateStart = prompt('enter start date, you only need DD')
                                var dateEnd = prompt('enter end date, you only need DD')
                                calendar.fullCalendar('renderEvent',
                                    {
                                        title: title,
                                        start: new Date(y, m, dateStart, startHour, startMinute),
                                        end: new Date(y, m, dateEnd, endTime),
                                        allDay: false

                                    },
                                    true
                                );
                            }
                            calendar.fullCalendar('unselect');
                        },
                        editable: true,
                        events: [

                        ]
                    });

                });


            </script>
        }

        <div class="row">
            <div class="col-md-12">
                <div id="calendar">
                </div>
            </div>

        </div>
</body>
</html>