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.
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!!"
},
});
});
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.
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;
I am attempting to create a MySQL backed events interface, using fullCalendar and MySQL. I have tried to manipulate the examples in the fullCalendar documentation and have successfully created a events feed from my database.
I am now trying to create a eventDrop call which sends an events id, title and start time to the database. I used the code from a previous question to create the eventDrop call, here is the JavaScript for the whole callendar page:
$(document).ready(function() {
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events div.external-event').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: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function(date, allDay) { // 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.allDay = allDay;
// 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);
// if so, remove the element from the "Draggable Events" list
$(this).remove();
},
// events from mysql database
events: "/json-events.php",
// submit to database
eventDrop: function(calEvent, jsEvent, view) {
var method = 'POST';
var path = 'submit.php';
var params = new Array();
params['id'] = calEvent.id;
params['start'] = calEvent.start;
params['end'] = calEvent.end;
params['title'] = calEvent.title;
post_to_url( path, params, method);
}
});
});
The PHP file I hoped would receive the POST data and insert it into the database with an end time equal to the start time plus 15 mins (edited after answer below):
<?php
mysql_connect("") or die(mysql_error());
mysql_select_db("") or die(mysql_error());
$id = $_POST["id"];
$title = $_POST["title"];
$start = $_POST["start"];
$end = date(Y-m-d T H:i:s , strtotime($start)+900);
$query = "INSERT INTO `events` VALUES (`$id`, `$title`, `$start`, `$end`, ``)";
mysql_query($query);
print $query;
?>
The database is not receiving the event data.
This is the conclusion I have come up with and I have no problem running this off my test and public server.
I have taken the FullCalendar and this is the format I use.
The database is real simple.
id integer 11 chars primary key auto-increment,
title varchar 50,
start varchar 50,
end varchar 50,
url varchar 50.
This is the index.php or index.html file.
<!DOCTYPE html>
<html>
<head>
<link href='css/fullcalendar.css' rel='stylesheet' />
<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='js/jquery-1.9.1.min.js'></script>
<script src='js/jquery-ui-1.10.2.custom.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: "json.php",
eventDrop: function(event, delta) {
alert(event.title + ' was moved ' + delta + ' days\n' +
'(should probably update your database)');
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
}
});
});
</script>
<style>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#loading {
position: absolute;
top: 5px;
right: 5px;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='loading' style='display:none'>loading...</div>
<div id='calendar'></div>
<p>json.php needs to be running in the same directory.</p>
</body>
</html>
This is the json.php file.
<?php
mysql_pconnect("localhost", "root", "") or die("Could not connect");
mysql_select_db("calendar") or die("Could not select database");
$rs = mysql_query("SELECT * FROM events ORDER BY start ASC");
$arr = array();
while($obj = mysql_fetch_object($rs)) {
$arr[] = $obj;
}
echo json_encode($arr);
?>
Once remove the column names in insert query and try, if you don't get then let's think about it. Do something like this
mysql_query(INSERT INTO `events` VALUES ('$id', '$title', '$start', '$end', ''));
Just print the post values before inserting, if it seems clear, then check your query.
echo the query and exit, you may get something like this
mysql_query(INSERT INTO `events` VALUES ('23', 'event title', 'start date', 'end date', ''));
Run this query to find errors if any
print $query - there should be a ; at the end