通过单击网站在完整日历上添加事件



我一直在网上搜索,似乎什么也找不到。所以具体来说,我正在尝试在您单击日期时创建一个事件。事件中的信息必须是:标题、事件开始和事件结束。

到目前为止,我有:

@section脚本{

            $(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: [
                    ]
                });
            });

在没有外界帮助的情况下进行了数小时的修补,我终于让事件以我需要的方式显示出来。我将发布下面的代码,所以希望没有人会像我一样经历这个。

<!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>

相关内容

  • 没有找到相关文章

最新更新