I'm trying to make a calendar with "FullCalendar" and codeigniter. I have read several questions on this page, but still do not understand because the calendar does not show me the events.
I have this routes:
$route['calendar'] = 'user/calendar/showCalendar';
$route['calendar/events'] = 'user/calendar/getEvents';
This is the controller:
public function showCalendar()
{
$this->template->add_css(base_url() . 'assets/plugins/fullcalendar/fullcalendar.min.css');
$this->template->add_js('https://code.jquery.com/ui/1.11.1/jquery-ui.min.js');
$this->template->add_js('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js');
$this->template->add_js(base_url() . 'assets/plugins/fullcalendar/fullcalendar.min.js');
$this->template->add_js(base_url() . 'assets/plugins/fullcalendar/config.js');
$data = array();
$this->template->write('title', 'Calendar', TRUE);
$this->template->write_view('header', 'user/template/header');
$this->template->write_view('sidebar', 'user/template/sidebar');
$this->template->write_view('content', 'user/calendar/calendar', $data, TRUE);
$this->template->render();
}
public function getEvents()
{
if($this->input->is_ajax_request())
{
$events = $this->calendar_mdl->getEvents();
echo json_encode($events);
}
}
My config.js:
$(function () {
/* initialize the external events
-----------------------------------------------------------------*/
function ini_events(ele) {
ele.each(function () {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 1070,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
}
ini_events($('#external-events div.external-event'));
/* initialize the calendar
-----------------------------------------------------------------*/
//Date for the calendar events (dummy data)
var date = new Date();
var d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
today: 'hoy',
month: 'mes',
week: 'semana',
day: 'dia'
},
//Random default events
editable: true,
events: "http://project.dev/calendar/events"
});
});
And my model:
public function getEvents()
{
$this->db->select('*');
$this->db->order_by('id', 'DESC');
$query = $this->db_get(dbCalendar); // dbCalendar is a constant
if($query->num_rows() > 0)
{
return $query->result_array();
}
return FALSE;
}
It is the first time I try to use fullCalnedar, and I do not understand why it don't show me my events. I read the documentation, but don't it did not helped me to find out what the error may be.
Related
Like everyone else I also have problem when displaying event in fullcalendar.
Below is my controller for JSON data:
function schedule($id) {
$data = $this->M_care->getSchedule($id);
echo json_encode($data);
exit;
}
This controller produce JSON data like that:
[{"id":"51","title":"test date","start":"2022-03-31T00:00:00-05:00","end":"2022-03-31T00:00:00-05:00"},{"id":"53","title":"test date","start":"2022-03-29T00:00:00-05:00","end":"2022-03-29T00:00:00-05:00"}]
and below is script for render calendar:
document.addEventListener('DOMContentLoaded', function() {
var initialLocaleCode = 'id';
var calendarEl = document.getElementById('calendar');
var url = '<?= base_url('service/Care/schedule/').$id; ?>';
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
validRange: function(nowDate) {
return {
start: nowDate
};
},
eventSources: [
{
url: url,
color: 'red',
textColor: 'black',
display: 'background'
}
]
});
calendar.render();
});
The $id in the url variable get from $id = $this->session->userdata('event');
Above code is not working for displaying events data. I have trying to solve this for several days, and search related question but none of them fix this issue.
Differs to the full calendar master database, I added a column called "link" in the event table of the database. My purpose is to allow users to go to different links when they click corresponding day.
I observe other posts/ documentation, still cannot figure out the solution.
Can someone help me?Below is the code of event.php and my js part in the index.html. I do not change any part of other files of the plugin
$json = array();
$request = "SELECT * FROM events ORDER BY id";
try {
$bdd = new PDO('mysql:host=localhost;dbname=test', 'root', '');
} catch (Exception $e) {
exit('Unable to connect to database.');
}
$result = $bdd->query($request) or die(print_r($bdd->errorInfo()));
echo json_encode($result->fetchAll(PDO::FETCH_ASSOC));
$(document).ready(function() {
function fmt(date) {
return date.format("YYYY-MM-DD HH:mm");
}
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',
center: 'title',
right: '',
},
events: "events.php",
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
editable: true,
select: function(start, end, jsEvent, view) {
window.location = "I need different links fetched from db!!"
},
});
});
As a follow up to Display image as background in fullcalendar, I now have a fully working MySQL solution, but I cannot find a way to change the background if a custom column that I set in my database is not empty (picture), nor changing the same opacity according to the same condition.
In my other question, I was able to change the background in dayRender and the opacity in eventRender:
dayRender: function (date, cell) {
cell.css("background","url(https://www.mozilla.org/media/img/firefox/firefox-256.e2c1fc556816.jpg) no-repeat center");
cell.css("background-size","contain")
},
eventRender: function(event, element) {
$(element).css("opacity", "0.75");
}
});
Now my js code looks like this:
$(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'
},
events: "/events.php",
dayRender: function (date, cell, view) {
cell.css("background","url(https://www.mozilla.org/media/img/firefox/firefox-256.e2c1fc556816.jpg) no-repeat center");
cell.css("background-size","contain")
},
eventRender: function(event, element) {
}
});
})
The PHP page to get the event data from the MySQL database is:
<?php
// List of events
$json = array();
// Query that retrieves events
$requete = "SELECT * FROM evenement ORDER BY id";
// connection to the database
try {
$bdd = new PDO('mysql:host=localhost;dbname=HIDDEN', 'HIDDEN', 'HIDDEN');
} catch(Exception $e) {
exit('Unable to connect to database.');
}
// Execute the query
$resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));
// sending the encoded result to success page
echo json_encode($resultat->fetchAll(PDO::FETCH_ASSOC));
?>
I tried to use this in dayRender to change the background with no success so far:
var eventoObj = $("#calendar").fullCalendar( 'clientEvents')[0];
alert(eventoObj.picture_url)
Can anyone help me out figuring this out?
Thank you for your time and help.
I am trying to implement full calendar js plugin but the events default to the first hour on the callendar that is from 12 a.m to 1 a.m .
Below is my code :
<script type="text/javascript">
$(document).ready(function () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
eventLimit: true, // allow "more" link when too many events
events: {
url: '<?php echo base_url(); ?>appointments/get_appointmentss',
error: function () {
$('#script-warning').show();
}
},
// Convert the allDay from string to boolean
eventRender: function (event) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
loading: function (bool) {
$('#loading').toggle(bool);
}
});
});
</script>
The returned value in json encode is below :
[{"title":"Rabbi Less Brown Motivation","allDay":"false","start":"2015-06-17 14:00:00","end":"2015-06-17 15:00:00"},{"title":"Miss Mary Wochete Sinaida","allDay":"false","start":"2015-06-02 14:15:30","end":"2015-06-02 14:30:25"},{"title":"Lt Col Robirt Sharma Monk","allDay":"false","start":"2015-06-18 08:00:00","end":"2015-06-18 09:00:00"}]
The start and end day are saved on mysql data type datetime .
What am I not doing right for the information to display within the stipulated time ?
I am trying create map with amCharts using jquery ajax but it doesnt work with ajax.
here my ajax code:
$('button#btn').click(function(){
$('div#ozellikli').html('<center><img src="assets/img/loading.gif" width="200" height="200"/></center>')
$.ajax({
type:'post',
url:'ozellikliAjax.php',
data:$('form#oz').serialize(),
success:function(msg){
$('div#ozellikli').html(msg);
}
});
});
Here my ajax php code:
<?php
include 'config.php';
$html="";
$yil=$_POST['yil'];
$tur=$_POST['tur'];
///HARITAYI CIZ
$sql="SELECT id,il,COUNT(kurum) AS kurum_Say FROM ozellikli GROUP BY id,il ORDER BY kurum_Say";
$result=$baglanti->query($sql);
$mapChart="";
while ($query=$result->fetch(PDO::FETCH_ASSOC)) {
$mapChart.=' { title: "'.$query['il'].':'.$query['kurum_Say'].'", id: "TR'.$query['id'].'",value:'.$query['kurum_Say'].', selectable: true },';
}
$html.='<script type="text/javascript">
AmCharts.ready(function() {
var map;
// *** CREATE MAP ***********************************************************
function createMap(){
map = new AmCharts.AmMap();
map.pathToImages = "http://www.ammap.com/lib/images/";
//map.panEventsEnabled = true; // this line enables pinch-zooming and dragging on touch devices
var dataProvider = {
mapVar: AmCharts.maps.turkeyLow
};
map.areasSettings = {
unlistedAreasColor: "#43B1A9",
rollOverOutlineColor: "#FFFFFF"
};
map.colorSteps=5;
map.valueLegend={
left: 10,
bottom:0,
minValue: "En Az",
maxValue: "En Çok"
};
dataProvider.areas = ['.$mapChart.'];
map.dataProvider = dataProvider;
map.addListener(\'clickMapObject\', function (event) {
// deselect the area by assigning all of the dataProvider as selected object
map.selectedObject = map.dataProvider;
// toggle showAsSelected
event.mapObject.showAsSelected = !event.mapObject.showAsSelected;
// bring it to an appropriate color
map.returnInitialColor(event.mapObject);
var states = [];
for (var i in map.dataProvider.areas) {
var area = map.dataProvider.areas[i];
if (area.showAsSelected) {
states.push(area.title);
}
}
});
map.write("mapdiv");
}
createMap();
});
</script>';
echo $html;
?>
when run the ajax code , script loading with ajax correctly but its not charting to map.
How can I solve this issue?
thanks
If you inject the resources the same way, you need to set manually it's ready state otherwise it won't work. AmCharts listens to the dom loaded event to set following property:
AmCharts.isReady = true;