If I have a string in the following format from a form input:
02/08/2016, 02/09/2016, 02/10/2016, 02/17/2016
How can I show the dates as events in a calendar like http://fullcalendar.io/? Should I convert them to an array, and then how can I convert them to an array? and how can I add more dates to that array/update it?
A calendar like http://fullcalendar.io/ is complex. The question is too broad, if you want to know how they do it.
Converting a string into an array is a good question. You can use the explode function in PHP as follows:
$inputs = explode(", ", "02/08/2016, 02/09/2016, 02/10/2016, 02/17/2016");
See http://php.net/manual/de/function.explode.php for more details.
Adding an element to an array can be done like this:
$inputs[] = "03/05/2016";
To update an array element, you have to find it first. You can search for an element of a simple array like the one above by an index such as $inputs[4]. But that might not be the best solution to uniquely identify a date, because in a calendar, you might have more than one event at the same day. Additionally, if you are dealing with thousands of events, it would be very slow to find the one that you want to update. I would recommend to look into other indexing strategies.
E.g. $inputs[year][month][day][id].
But that is only one of many possibilities.
As I saw source file of this page, you need JSON array to create your events. At the end you have to create a string like this:
events: [
{
title: 'All Day Event',
start: '2016-01-01'
},
{
title: 'All Day Event',
start: '2016-01-07',
},
{
title: 'All Day Event',
start: '2016-01-09'
},
{
title: 'All Day Event',
start: '2016-01-16'
},
{
title: 'All Day Event',
start: '2016-01-11',
}
]
So use this code:
<?php
$s = '02/08/2016, 02/09/2016, 02/10/2016, 02/17/2016';
$s = explode(', ', $s);
$dates = [];
foreach($s as $event) {
//Fix format
$temp = explode('/', $event);
$dates[] = array('title' => 'All Day Event', 'start' => $temp[2] . '-' . $temp[1] . '-' . $temp[0] );
}
$dates = json_encode($dates);
So finally, Your whole HTML would be something like this:
<?php
$s = '02/08/2016, 02/09/2016, 02/10/2016, 02/17/2016';
$s = explode(', ', $s);
$dates = [];
foreach($s as $event) {
//Fix format
$temp = explode('/', $event);
$dates[] = array('title' => 'All Day Event', 'start' => $temp[2] . '-' . $temp[1] . '-' . $temp[0] );
}
$dates = json_encode($dates);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link rel='stylesheet' href='../lib/cupertino/jquery-ui.min.css' />
<link href='../fullcalendar.css' rel='stylesheet' />
<link href='../fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script src='../lang-all.js'></script>
<script>
$(document).ready(function() {
var currentLangCode = 'en';
// build the language selector's options
$.each($.fullCalendar.langs, function(langCode) {
$('#lang-selector').append(
$('<option/>')
.attr('value', langCode)
.prop('selected', langCode == currentLangCode)
.text(langCode)
);
});
// rerender the calendar when the selected option changes
$('#lang-selector').on('change', function() {
if (this.value) {
currentLangCode = this.value;
$('#calendar').fullCalendar('destroy');
renderCalendar();
}
});
function renderCalendar() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2016-01-12',
lang: currentLangCode,
buttonIcons: false, // show the prev/next text
weekNumbers: true,
editable: true,
eventLimit: true, // allow "more" link when too many events
events: <?php $dates ?>
});
}
renderCalendar();
});
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#top {
background: #eee;
border-bottom: 1px solid #ddd;
padding: 0 10px;
line-height: 40px;
font-size: 12px;
}
#calendar {
max-width: 900px;
margin: 40px auto;
padding: 0 10px;
}
</style>
</head>
<body>
<div id='top'>
Language:
<select id='lang-selector'></select>
</div>
<div id='calendar'></div>
</body>
</html>
In fullcalendar plugin you need date in this format "Y-m-d". So you need to use explode() for string to array conversion and than you can use strtotime() for date format conversion.
<?php
$string = "02/08/2016, 02/09/2016, 02/10/2016, 02/17/2016";
$explodedDates = explode(",",$string); // explode with comma
$convertedDate = array();
foreach ($explodedDates as $key => $value) {
$convertedDate[] = date("Y-m-d", strtotime($value)); // conversion in correct format.
}
echo "<pre>";
print_r($convertedDate);
?>
From your question: and how can I add more dates to that array/update it?
You can just push the value in your existing array as:
array_push($convertedDate,'2015-10-10');
print_r($convertedDate);
Solution with php is as below PHP code
<?php
$str = explode(',', str_replace(" ","","02/08/2016, 02/09/2016, 02/10/2016, 02/17/2016"));
print_r($str);
$events = array();
foreach($str as $k => $date) {
$events[$k]['title'] = 'Title';
$events[$k]['start'] = date('D M d Y H:i:s', strtotime($date));
}
?>
<script type="text/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: <?php echo json_encode($events);?> // load events
});
});
</script>