Fullcalendar。链接到数据库

时间:2016-01-05 18:39:47

标签: javascript php ajax fullcalendar

目前我正在使用完整的日历插件尝试使用日历。这是我的代码,

<!DOCTYPE html>
    <html>
    <head>
    <meta charset='utf-8' />
    <link href='fullcalendar.css' rel='stylesheet' />
    <link href='fullcalendar.print.css' rel='stylesheet' media='print' />
    <script src='moment.min.js'></script>
    <script src='jquery.min.js'></script>
    <script src='fullcalendar.min.js'></script>
    <script>

        $(document).ready(function() {

            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },

                selectable: true,
                selectHelper: true,
                select: function(start, end, jsEvent, view){
                  window.location = "testing.php";
                },



            });

        });

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

目前,当我点击日期时,日历会将我重定向到test.php(这就是我想要的)。这里提到了棘手的部分。我如何以一种方式对其进行编码,例如,当用户在1月10日按下时,细节(在数据库中)将回显到该php。 (testing.php)。

有关我的testing.php文件应如何完成的任何建议?如果我碰巧问了一个愚蠢的问题,请提前抱歉。

要添加,它是某种类似于此http://www.w3schools.com/php/php_ajax_database.asp的功能,提前感谢您提供任何有用的提示。

2 个答案:

答案 0 :(得分:0)

您可能需要在window.location

中将开始日期附加为url参数
def kenobi(k):
    def think(k):   
        if type(k[1]) == int:
            k = calculator(k)
            return kenobi(k) #here I actually want to return [+,[-,15,8],2]
        if type(k[1][0]) == str:
            return kenobi(k[1][1])

    def calculator(k):
        if k[0] == '*':
            k = k[1]*k[2]
            return k
        if k[0] == '-':
            k = k[1]-k[2]
            return k
        if k[0] == '+':
            k = k[1]+k[2]
            return k
    return think(k)

print kenobi(['+',['-',['*',3,5],8],2])

然后在php端你... select: function(start, end, jsEvent, ){ window.location = "testing.php?start=" + start; },

另一方面,您可以在select函数中发出ajax post请求。

答案 1 :(得分:0)

我从日历中选择日期时使用模式弹出,我提供了所需的值。

<强>脚本

select: function (start, end, allDay) {
                        $('#eventTitle').val('');
                        $('#eventStart').val('');
                        $('#eventEnd').val('');
                        $('#eventDescription').val('');
                        $('#eventType').val('');
                        $('#eventStart').val('');
                        $('#eventEnd').val('');
                        $('#myModal').modal();
                        $('#eventStart').val(moment(start).format('YYYY-MM-DD, HH:mm:ss'));
                        $('#eventEnd').val(moment(end).format('YYYY-MM-DD, HH:mm:ss'));

<强> HTML

<div id="myModal" class="modal fade">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header bg-primary">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Create Event</h4>
                        </div>
                        <div class="modal-body">                        
                            <div class="row">
                                <div class="form-group"><div class="col-sm-12">
                                        <label class="label bg-primary">Title</label> <input type="text" name="eventTitle" id="eventTitle" class="form-control" />                                    
                                    </div>
                                </div>
                                <div class="form-group"><div class="col-sm-12">
                                        <label class="label bg-primary">Description</label> <textarea name="eventDescription" id="eventDescription" class="form-control" rows="5"></textarea>                                    
                                    </div>
                                </div>
                                <div class="form-group"><div class="col-sm-6">
                                        <label class="label bg-primary">Event Reason</label> <select id="eventType"  class="form-control" name="event_type">
                                            <option value="">---Select One---</option>
                                            <option value="meeting">Meeting</option>
                                            <option value="reminder">Reminder</option>
                                            <option value="holiday">Holiday</option>
                                            <option value="vacation">Vacation</option>
                                            <option value="anniversary">Anniversary</option>
                                            <option value="unsched">Unscheduled Leave</option>
                                            <option value="sickleave">Sick Leave</option>
                                        </select>                                   
                                    </div>
                                </div>
                                &nbsp;&nbsp;&nbsp;&nbsp;<label class="label bg-primary">Event Type</label>
                                <div class="form-group"><div class="col-sm-6">                                        
                                        <div class="btn-group" data-toggle="buttons">
                                            <label class="btn btn-default active" >
                                                <input type="radio"  id="optionsRadio" name="quality[25]" checked="checked" value="false" /> Timed
                                            </label> 
                                            <label class="btn btn-default" >
                                                <input type="radio"  id="optionsRadio" name="quality[25]" value="true" /> All Day
                                            </label>
                                        </div> 
                                    </div>
                                </div>
                                <div class="col-lg-pull-2">
                                    <div class="col-sm-6">

                                        <div class="form-group"><label class="label bg-primary">Start Date</label>
                                            <div class="input-group date" id="datetimepicker1" >
                                                <input type="text" class="form-control" id="eventStart"/>
                                                <span class="input-group-addon">
                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                </span>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div class="col-lg-pull-2">
                                    <div class="col-sm-6"><input type="text" class="form-control hidden" id="eventHide"/>
                                        <div class="form-group"><label class="label bg-primary">End Date</label>                                        
                                            <div class="input-group date" id="datetimepicker2">
                                                <input type="text" class="form-control" id="eventEnd"/>
                                                <span class="input-group-addon">
                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                </span>                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="modal-footer"><button type="Submit" class="btn bg-primary" id="event_submit" onClick="addEvent()"><span><i class="glyphicon glyphicon-check"></i></span>  Submit</button>
                            <button type="Reset" class="btn btn-default" data-dismiss="modal"><span><i class="glyphicon glyphicon-erase"></i></span>  Close</button>
                        </div>
                    </div>
                </div>
            </div>

注意:使用Modal的上述代码需要引导程序插件