Fullcalendar. Linking To Database

currently i am trying to to a calendar using the full calendar plugin. Here is my code,

Solution 1:

You would probably need to append the start date as a url parameter in your window.location

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

Then on the php side you'd $_GET['start']

On the other hand, you could make an ajax post request in the select function.

Solution 2:

I used a modal to pop-up when selecting a date from the calendar from which I supplied required values.

Script

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

<divid="myModal"class="modal fade"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header bg-primary"><buttontype="button"class="close"data-dismiss="modal">&times;</button><h4class="modal-title">Create Event</h4></div><divclass="modal-body"><divclass="row"><divclass="form-group"><divclass="col-sm-12"><labelclass="label bg-primary">Title</label><inputtype="text"name="eventTitle"id="eventTitle"class="form-control" /></div></div><divclass="form-group"><divclass="col-sm-12"><labelclass="label bg-primary">Description</label><textareaname="eventDescription"id="eventDescription"class="form-control"rows="5"></textarea></div></div><divclass="form-group"><divclass="col-sm-6"><labelclass="label bg-primary">Event Reason</label><selectid="eventType"class="form-control"name="event_type"><optionvalue="">---Select One---</option><optionvalue="meeting">Meeting</option><optionvalue="reminder">Reminder</option><optionvalue="holiday">Holiday</option><optionvalue="vacation">Vacation</option><optionvalue="anniversary">Anniversary</option><optionvalue="unsched">Unscheduled Leave</option><optionvalue="sickleave">Sick Leave</option></select></div></div>&nbsp;&nbsp;&nbsp;&nbsp;<labelclass="label bg-primary">Event Type</label><divclass="form-group"><divclass="col-sm-6"><divclass="btn-group"data-toggle="buttons"><labelclass="btn btn-default active" ><inputtype="radio"id="optionsRadio"name="quality[25]"checked="checked"value="false" /> Timed
                                            </label><labelclass="btn btn-default" ><inputtype="radio"id="optionsRadio"name="quality[25]"value="true" /> All Day
                                            </label></div></div></div><divclass="col-lg-pull-2"><divclass="col-sm-6"><divclass="form-group"><labelclass="label bg-primary">Start Date</label><divclass="input-group date"id="datetimepicker1" ><inputtype="text"class="form-control"id="eventStart"/><spanclass="input-group-addon"><spanclass="glyphicon glyphicon-calendar"></span></span></div></div></div></div><divclass="col-lg-pull-2"><divclass="col-sm-6"><inputtype="text"class="form-control hidden"id="eventHide"/><divclass="form-group"><labelclass="label bg-primary">End Date</label><divclass="input-group date"id="datetimepicker2"><inputtype="text"class="form-control"id="eventEnd"/><spanclass="input-group-addon"><spanclass="glyphicon glyphicon-calendar"></span></span></div></div></div></div></div></div><divclass="modal-footer"><buttontype="Submit"class="btn bg-primary"id="event_submit"onClick="addEvent()"><span><iclass="glyphicon glyphicon-check"></i></span>  Submit</button><buttontype="Reset"class="btn btn-default"data-dismiss="modal"><span><iclass="glyphicon glyphicon-erase"></i></span>  Close</button></div></div></div></div>

Note : Above code using Modal require bootstrap plug-ins