Using fullcalendar with php scripts for submitting the ajax through to php/myql connection.
I've added a drag and drop feature to the page/fullcalendar and it renders fine on the page, works, and no problems. When you normally click and type an event, its fires the script and uses PHP to add via mysql.
The problem is, once the drag and drop element has been dropped on the calendar, I need to execute the same script as if you were to use when its clicked and typed on. I might have been working on this for too long as now I've confused myself!
Script is:
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
// initialize the external events
// -----------------------------------------------------------------
$("#external-events .fc-event").each(function() {
// store data so the calendar knows to render an event upon drop
$(this).data("event", {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
var calendar = $('#calendar').fullCalendar({
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function() {
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
defaultView: 'agendaWeek',
nowIndicator: true,
weekends: false,
firstday: 1,
forceEventDuration: true,
timezoneParam: 'UTC',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
businessHours: {
// days of week. an array of zero-based day of week integers (0=Sunday)
dow: [ 1, 2, 3, 4, 5 ], // Monday - Friday
start: '07:00', // a start time (10am in this example)
end: '19:00', // an end time (6pm in this example)
},
events: "get/engineer_events.php",
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: 'process/add_events.php',
data: 'title='+ title+'&start='+ start +'&end='+ end,
type: "POST",
success: function(json) {
alert('Added Successfully');
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
},
true
);
}
calendar.fullCalendar('unselect');
},
editable: true,
eventDrop: function(event, delta) {
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: 'process/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Your event has been added.");
}
});
},
eventClick: function(event) {
var decision = confirm("Woah, you're about to delete this, are you sure?");
if (decision) {
$.ajax({
type: "POST",
url: "process/delete_event.php",
data: "&id=" + event.id,
success: function(json) {
$('#calendar').fullCalendar('removeEvents', event.id);
alert("Updated successfully");}
});
}
},
eventResize: function(event) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'process/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Event updated successfully");
}
});
}
});
});
</script>
Related
I have a problem with JavaScript FullCalendar.
When I click on a day, a modal opens, where the user has to choose a name. This name is added to the selected day.
When I add the second event (so, first name), it works. When I click on another day to add a new event, the new event is well added, BUT this event is also added to the day selected for the first event.
When I add a third event, this event is added where expected, but also added to the days I had previously added events.
When the page is refreshed, the problem disappears for the first event, and after, start again, as explained. Here is my code:
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
editable:true,
header:{
left:'prev,next today titre',
center:'title',
right:'month,agendaWeek,agendaDay'
},
events: 'load.php',
selectable:true,
selectHelper:true,
locale: 'fr',
showNonCurrentDates: false,
buttonText: {
today: 'Aujourd\'hui - Tournée 1',
month: 'Mois',
week: 'Semaine',
day: 'Jour',
list: 'Liste'
},
dayNamesShort: [
'Dim','Lun','Mar','Mer','Jeu','Ven','Sam'
],
monthNames:[
'Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'
],
firstDay:1,
aspectRatio: 1.50,
displayEventTime: false,
select: function(start, end, allDay)
{
var title = '';
var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
$('#myModal').modal('show');
$('.savebutton').click(function() {
title = document.getElementById("name").options[document.getElementById('name').selectedIndex].text;
if(title)
{
var backgroundColor = "red";
$.ajax({
url:"insert.php",
type:"POST",
data:{title:title, start:start, end:end,backgroundColor:backgroundColor},
success:function()
{
calendar.fullCalendar('refetchEvents');
title='';
// location.reload();
}
})
}
});
}
I am using JavaScript event calendar. Everything is working fine except start and end date displaying problem. I am reading Data from SQL server and format is SD:2017-12-08 12:30:00 and ED:2017-12-08 16:30:00. But on the browser event shows as 12-08-2017. Same thin happens to all the events.
$(document).ready(function () {
$.ajax({
type: "POST",
contentType: "application/json;charset=utf-8",
data: "{}",
url: '<%= ResolveUrl("EventList.aspx/GetEvents")%>',
dataType: "json",
success: function (data) {
$('#fullcal').fullCalendar({
eventClick: function (calEvent, jsEvent, view) {
$('#eid').html(calEvent.id);
$('#modalTitle').html(calEvent.title);
$('#msDate').html(moment(calEvent.start).format('DD-MM-YYYY HH:mm'));
$('#meDate').html(moment(calEvent.end).format('DD-MM-YYYY HH:mm'));
$('#mloc').html(calEvent.loc)
$('#mdesc').html(calEvent.des)
$('#url').attr('href', 'Meetings/Meeting.aspx?ID=' + calEvent.id)
$('#fullCalModal').modal();
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
views: {
month: { // name of view
columnFormat: 'dddd',
},
week: { // name of view
titleFormat: 'MMMM D , YYYY',
columnFormat: 'dddd D/M',
},
day: { // name of view
titleFormat: 'MMMM DD YYYY',
columnFormat: 'dddd D-M-YYYY',
}
},
//editable: true,
displayEventTime: false,// hide event time
eventLimit: true, // allow "more" link when too many events
events: $.map(data.d, function (item, i) {
var event = new Object();
event.id = item.EventID;
event.title = item.EventName;
event.start = new Date(moment(item.StartDate).format('DD-MM-YYYY HH:mm'));
event.end = new Date(moment(item.EndDate).format('DD-MM-YYYY HH:mm'));
event.loc = item.Location;
event.des = item.Description;
return event;
}),
});
$("div[id=fullcal]").show();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
debugger;
}
});
});
Make sure you select your StartDate & EndDate using ISO 8601 format from SQL server Database: CONVERT(NVARCHAR(30),starttime, 126) as startdate which returns 2017-12-08T12:30:00
Good evening everyone!
I need to show the FullCalendar events of my agenda.
I have a list of events in my database and my method returns database data via json (DAO jsp). I'm using dataSet and End date because Java does not support the use of the attributes of reserved words.
my json returns this:
[{"id": 3,"title": "Alexandre Garcia","dataStart": "05/09/2016 20:00","dataEnd": "05/09/2016 21:00"}]
my javascript:
<script type="text/javascript">
$(document).ready(function () {
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
timezone: "local",
ignoreTimezone: false,
editable: false,
selectable: true,
minTime: "07:00:00",
maxTime: "17:00:00",
slotDuration: "00:60:00",
allDay: false,
events: function (start, end, timezone, callback) {
$.ajax({
url: 'app.json',
type: "GET",
datatype: 'json',
success: function (doc) {
var events = [];
if (doc != undefined && doc.length > 0) {
doc.forEach(function (entry) {
events.push({
title: entry.title,
start: entry.dataStart,
end: entry.dataEnd
});
});
}
callback(events);
}, error: function (err) {
alert('Error in fetching data');
}
});
},
eventClick: function (calEvent, jsEvent, view) {
alert(calEvent.title);
}
});
});
</script>
but my calendar is always empty, could help me?
To better understand my question, take a look at the JSFiddle Example.
Basically there are tree kinds of unique items on the calendar that are all day events: Today, Completed, and Incomplete days. I need to figure a way to populate days that don't have anything on them (Today, or Incomplete), in this case they would be populated with "Completed". How can I figure out what these days are?
Also any way to limit the calendar to a set months range? For instance Quarter 1 would be Dec 1st to Mar 31st.
//Calendar
$(document).ready(function() {
// Figure out todays date and provide link to enter data
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
// Staff Data Calendar
$('#calendar-staff').fullCalendar({
header: {
left: '',
center: 'title',
},
businessHours: true, // display business hours
handleWindowResize: true, // responsive layout
editable: false,
events: [
// red areas where no events can be dropped
{
title: 'No Data',
start: '2015-02-03',
url: '#',
color: '#E64C65'
},
{
title: 'No Data',
start: '2015-02-17',
url: '#',
color: '#E64C65'
},
{
// Display Today
title: 'Enter Data for Today',
url: 'staffing_data_edit.html',
color: '#5E9EF3',
start: new Date(y, m, d)
}
]
});
});
You can use and apply a custom check on a event dayRender Click here for reference
Or you can use event eventAfterAllRender which call after the calendar is ready to draw. you can use a loop and check the empty days.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2018-10-25',
navLinks: true, // can click day/week names to navigate views
selectable: false,
selectHelper: true,
select: function(start, end) {
},
dayRender: function(date, cell )
{
console.log(date);
console.log(cell);
},
eventRender: function(event, element, view) {
},
eventAfterAllRender: function(view)
{
if (view.name == "month") {
var allEvents = $('#calendar').fullCalendar('clientEvents');
for (var index in allEvents) {
var event = allEvents[index];
}
}
},
eventClick: function(event) {
return false;
},
loading: function(bool) {
//$('#loading').toggle(bool);
},
timezone: true,
editable: false,
eventLimit: true, // allow "more" link when too many events
eventLimitTex: 'More shifts',
events: eventsJson
});
I have managed to get events to add to the database by calling addevents.php and passing variables via ajax to the php script. I have events.php that SELECTS everything from the table and passes it back to the calendar (default.html) as a string. However the calendar will not populate.
events.php
<?php
// List of events
$json = array();
// connection to the database
$mysqli = new mysqli("localhost", "root", null, "fullcalendar");
//check connection
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
//fetches and sends data in string
$result = $mysqli->query("SELECT * FROM calendar_data ORDER BY id");
$display = $result->fetch_array(MYSQLI_ASSOC);
echo json_encode($display);
?>
default.html
<!DOCTYPE html>
<html>
<head>
<link href='css/fullcalendar.css' rel='stylesheet' />
<script src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'></script>
<script src='js/fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: "http://localhost:80/fullcalendar/events.php",
// Convert the allDay from string to boolean
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://localhost:80/fullcalendar/add_events.php',
data: 'title='+ title+'&start='+ start +'&end='+ end ,
type: "POST",
success: function(json) {
alert('Added Successfully');
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
eventDrop: function(event, delta) {
start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://localhost:80/fullcalendar/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Updated Successfully");
}
});
},
eventResize: function(event) {
start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'http://localhost:80/fullcalendar/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Updated Successfully");
}
});
}
});
});
</script>
<style>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 720px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>