I used the latest javascript fullCalendar (https://fullcalendar.io/) on a wordpress webpage to be able to display appointments of a wordress my users. So far the Callendar shows up on the page. Now I want to get the appointments from the db and display them in the Calendar.
If I create an array in php, with the appointments to display as a string, the appoinment shows up in the calendar.
Example:
$events = $wpdb->get_results("SELECT * FROM wp_projekt_calendar WHERE calendar_author=$uid");
foreach($events AS $event){
$array['title']= 'rtrt';
$array['start']= '2020-08-10 10:00:00';
$array['end'] = '2020-08-10 11:00:00';
}
echo json_encode($array);
But if I use the query results to show the appointment it doesent work (query works well!):
foreach($events AS $event){
$array['title']= $event_array->calendar_title;
$array['start']= $event_array->calendar_startdate .' '.$event_array->calendar_starttime;
$array['end'] = $event_array->calendar_enddate .' '.$event_array->calendar_endtime;;
}
echo json_encode($array);
This is how my calendar looks like:
<script>
document.addEventListener('DOMContentLoaded', function() {
var initialLocaleCode = 'de';
var localeSelectorEl = document.getElementById('locale-selector');
var calendarEl = document.getElementById('calendar');
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = new FullCalendar.Calendar(calendarEl, {
height: '100%',
expandRows: true,
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
initialView: 'dayGridMonth',
locale: initialLocaleCode,
navLinks: true, // can click day/week names to navigate views
editable: true,
selectable: true,
nowIndicator: true,
dayMaxEvents: true, // allow "more" link when too many events
events: {
url: "https://mydomainxy.com/wp-content/themes/gambit-child/events.php?uid='<?php // $anwender_id ?>'",
//url: "https://mydomainxy.com/wp-content/themes/gambit-child/php/get-events.php'",
type: 'POST',
error: function() {
alert('There was an error while fetching events.');
}
}
});
calendar.render();
});
</script>
What am I doing wrong or how can I get this to work?
Related
I'm trying to use the full calendar to set an event dynamically.By using function loadData().But I couldn't work successfully.
Could anybody please let me know how to solve this problem?
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var temp_array = loadData();
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
editable: true,
eventLimit: true, // allow "more" link when too many events
header:{
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth'
},
plugins: [ 'interaction','dayGrid' ],
for (let i = 0 ; i <temp_array.length ; i++){
calendar.addEvent({
title: temp_array[i][0],
start:temp_array[i][1],
end :temp_array[i][2]
})
}
});
calendar.render();
});
function loadData(){
let temp_array=[];
temp_array[0]=["test1","2019-07-16","2019-07-21"];
temp_array[1] = ["test2","2019-07-15","2019-07-20"];
temp_array[2] =["test1","2019-07-16",""];
return temp_array;
}
I tried this it throws an
exception: Uncaught SyntaxError: Unexpected identifier
plugins: [ 'interaction','dayGrid' ],
for (let i = 0 ; i <temp_array.length ; i++){
calendar.addEvent({
title: temp_array[i][0],
start:temp_array[i][1],
end :temp_array[i][2]
})
}
You cannot put a for loop inside an object like that. You can pass events as an array to calendar's config: https://fullcalendar.io/docs/events-array
EDIT:
If you want dynamic events, you can also pass a function: https://fullcalendar.io/docs/event-source-object#options
I am trying to build an application that creates events within fullcalendar. I don't allow user to create an "allDay" event at all at the client side but they still can see it within the view. Is there any method to remove allDays from views completely?
function initCalendar {
if (!jQuery().fullCalendar) {
return;
}
var date = new Date(),
started,
ended
var header = {};
var calendar = $('#calendar').fullCalendar({
header: header,
selectable: true,
selectHelper: true,
select: function (start, end, allDay) {
$('#fc_create').click();
var dateStart = start;
var dateEnd = end;
$(".antosubmit").on("click", function() {
var title = $("#reservation-title").val();
if (title) {
var event = {
editable: true,
title: title,
start: dateStart,
end: dateEnd,
allDay: false
}
calendar.fullCalendar('renderEvent', event, true);
calendar.fullCalendar('unselect');
#('.antoclose').click();
return false;
}
else {
////alert here
}
})
}
})
}
From the docs:
allDaySlot: false
https://fullcalendar.io/docs/agenda/allDaySlot/
** Update for v5:
https://fullcalendar.io/docs/allDaySlot
I'm using FullCalendar to display a calendar on the web page (no surprise there).
A user can add events on the calendar, which is then passed through POST to the CodeIgniter controller. The controller executes a function in the model to insert the data in the database.
The problem I'm facing is that the date time, when inserted in the database adds 4 minutes for a reason i do not understand.
This is the JavaScript used for FullCalendar:
$(document).ready(function() {
var today = moment().day();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
defaultView: 'agendaWeek',
eventLimit: true, // allow "more" link when too many events
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = "<?=$anim['NOMANIM']?>";
var id = "<?=$anim['CODEANIM']?>";
if (title) {
start = moment(start).format('YYYY-MM-DD HH:mm:ss');
end = moment(end).format('YYYY-MM-DD HH:mm:ss');
$.ajax({
url: '<?php echo base_url("index.php/activite/add_activite"); ?>',
data: 'title='+ title+'&id='+ id+'&start='+ start +'&end='+ end,
type: "POST",
success: function(json) {
alert(start); // THIS SHOWS THE CORRECT DATETIME
}
})
};
$('#calendar').fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
}, true); // stick? = true
$('#calendar').fullCalendar('unselect');
},
events: <?=$events?>
});
});
And here is the controller function:
public function add_activite() {
$title = $_POST['title'];
$id = $_POST['id'];
$datetime_start = strtotime($_POST['start']);
$datetime_end = strtotime($_POST['end']);
$date = date('Y-m-d', $datetime_start);
$start = date('H:m:s', $datetime_start);
$end = date('H:m:s', $datetime_end);
$this->EZ_query->insert_activite($date, $start, $end);
}
If you think there is something I'm doing not correctly beside the time problem, I'm open to any pointers :), Thanks!
Your data formatting in php is not correct, minutes are denoted by i not m (which is used my month already). See here: http://php.net/manual/en/function.date.php
So change:
$start = date('H:i:s', $datetime_start);
$end = date('H:i:s', $datetime_end);
I'm using the jquery fullcalendar plugin. I can display dynamic dates on a button click. The issue I have now is when loading the dates from the db all the dates populate just one day.
Here is the code with the call to the web service:
$('#calendar').fullCalendar({
header: {
left: 'prev, next today',
center: 'title',
right: 'month, agendaWeek, agendaDay'
},
defaultView: 'month',
editable: true,
allDaySlot: false,
selectable: true,
slotMinutes: 15,
events: 'DAL/WebService1.asmx/GetEvents',
allDay:false
});
Here is the date from that web method
$('#calendar').fullcalendar('renderEvent',event_object,'stick')
This will attach your event to its date on the calendar. The event_object only needs a title and a start date to be valid, but I'd suggest adding an id to make editing/deleting easier.
Render event documentation
Figured out how to get the calendar to render dates separately with this code here. Hopefully helps somebody in the future
var events = [];
$('#calendar').fullCalendar({
events: function (start, end, timezone,callback) {
$.ajax({
url: 'DAL/WebService1.asmx/GetEvents',
dataType: 'json',
success: function (data) {
console.log(data);
var events = [];
$(data).each(function (index, d) {
events.push({
title: d.title,
start: d.startDate
});
});
callback(events);
}
});
}
});
i use Full calendar plugin to do this and i have done something but still did not get up to mark.
hear is my scripting code
$('#calendar').fullCalendar({
//theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {//This is to add icons to the visible buttons
prev: "<span class='fa fa-caret-left'></span>",
next: "<span class='fa fa-caret-right'></span>",
today: 'today',
month: 'month',
week: 'week',
day: 'day'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function(date) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.backgroundColor = $(this).css("background-color");
copiedEventObject.borderColor = $(this).css("border-color");
console.log(copiedEventObject);
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
/*alert(date + ' was moved ' + allDay + ' days\n' +
'(should probably update your database)');*/
},
//events:"web_master/mycal/ajax_fetch_calendar_data",
events: function(start, end, timezone, callback) {
$.ajax({
url: 'web_master/mycal/ajax_fetch_calendar_data',
dataType: 'json',
type: "POST",
success: function(doc) {
//console.log(doc);
var events = [];
$(doc).find('event').each(function(){
console.log(doc);
events.push({
title: $(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
});
}
});
},
});
in this i successfully found my doc in events section.
here is the code to fetch events from DB
public function ajax_fetch_calendar_data()
{
try
{
$info = $this->mod_rect->fetch_calendar();
#pr($info);
for($i = 0 ; $i < count($info) ; $i++)
{
$rows[]= array("id"=>$info[$i]['i_id'],
"title"=> $info[$i]['s_title'],
"start"=> $info[$i]['dt_start_date'],
"end"=>$info[$i]['dt_end_date'],
"allDay"=> $info[$i]['s_allDay']);
}
if($rows)
{
echo json_encode($rows);
}
}
catch(Exception $err_obj)
{
show_error($err_obj->getMessage());
}
}
but there is an find(event) function which is didn't found.
Basically what i need to do that
i have some events, those are fetch from DB and i have to drag them on the specific date on the date that comes(upto this done), but i want to store that in Db and fetch them from DB.
I am new to java script and jquery and i didn't know about JSON also.
any help regarding this will helpfull to me.
Thanks.
Well
After few days I have done it myself.
And I think it would be help full to someone So i update my Question
In the Events Section of Fullcalendar for reading multiple events and showing them in your Fullcalendar
events: function(start, end, callback) {
$.ajax({
url: 'web_master/mycal/ajax_fetch_calendar_data',
dataType: 'json',
type: "POST",
success: function(doc) {
var eventObject = [];
for(i=0;i<doc.length;i++)
{
eventObject.push({
id : doc[i].id,
start : doc[i].start,
end : doc[i].end,
title : doc[i].title
//allDay : doc[i].allDay,
//backgroundColor : doc[i].backgroundColor,
//borderColor : doc[i].borderColor
});
}
callback(eventObject);
}
});
},
And i fetch it from my DB in this way
public function ajax_fetch_calendar_data()
{
try
{
$info = $this->mod_rect->fetch_calendar();
echo json_encode($info);
}
catch(Exception $err_obj)
{
show_error($err_obj->getMessage());
}
}