I'm trying to sync the calendar I created with fullcalendar to the gmail calendar.
I've already set everything up in gmail to get the KEY-API and the calendar id in gmail. I followed this tutorial: click here .
code to create calendar with fullcalendar:
<div class="container">
<div class="row">
<div style="width:16em" class="col-lg-4">
<h3><strong>Dias de Atendimento</strong></h3>
<table border="1">
<tr>
<th>Dia</th>
<th>Hora</th>
</tr>
<tr>
<td>Terça-Feira</td>
<td>14:30 às 17:00</td>
</tr>
<tr>
<td>Quarta-Feira</td>
<td>14:30 às 17:00</td>
</tr>
<tr>
<td>Quinta-Feira</td>
<td>09:30 às 12:00</td>
</tr>
<tr>
<td>Sexta-Feira</td>
<td>09:30 às 12:00</td>
</tr>
</table>
<h3><strong>Legenda</strong></h3>
<table border="1">
<tr>
<th>Cores</th>
<th>Descrição</th>
</tr>
<tr>
<td>Vermelho</td>
<td>Indisponível</td>
</tr>
<tr>
<td>Laranja</td>
<td>Alterações</td>
</tr>
<tr>
<td>Verde</td>
<td>Atendimento</td>
</tr>
<tr>
<td>Azul</td>
<td>Marcações Psicólogo</td>
</tr>
</table>
</div>
<div class="col-lg-8 text-center">
<div id="calendar" class="col-centered">
</div>
</div>
</div>
<!-- /.row -->
<!-- Modal -->
<div class="modal fade" id="ModalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="form-horizontal" method="POST" action="./novoeventoPsi">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Novo Evento</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Nome</label>
<div class="col-sm-10">
<input type="text" name="title" class="form-control" id="title">
</div>
</div>
<div class="form-group">
<label for="contact" class="col-sm-2 control-label">Contacto</label>
<div class="col-sm-10">
<input type="number" name="contact" class="form-control" id="contact">
</div>
</div>
<div class="form-group">
<label for="color" class="col-sm-2 control-label">Cor</label>
<div class="col-sm-10">
<select name="color" class="form-control" id="color">
<option value=""></option>
<option style="color:#FF8C00;" value="#FF8C00">◼ Laranja</option>
<option style="color:#FF0000;" value="#FF0000">◼ Vermelho</option>
<option style="color:#58FA58;" value="#58FA58">◼ Verde</option>
</select>
</div>
</div>
<div class="form-group">
<label for="start" class="col-sm-2 control-label">Data/Hora Inicial</label>
<div class="col-sm-10">
<input type="datetime" name="start" class="form-control" id="start">
</div>
</div>
<div class="form-group">
<label for="end" class="col-sm-2 control-label">Data/Hora Final</label>
<div class="col-sm-10">
<input type="datetime" name="end" class="form-control" id="end">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">Fechar</button>
<button type="submit" class="btn btn-primary">Guardar</button>
</div>
</form>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="ModalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="form-horizontal" method="POST" action="./updateeventoPsi">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Alterar Atividade</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Nome</label>
<div class="col-sm-10">
<input type="text" name="title" class="form-control" id="title" placeholder="Titulo">
</div>
</div>
<div class="form-group">
<label for="contact" class="col-sm-2 control-label">Contacto</label>
<div class="col-sm-10">
<input type="text" name="contact" class="form-control" id="contact" placeholder="Contacto">
</div>
</div>
<div class="form-group">
<label for="color" class="col-sm-2 control-label">Cor</label>
<div class="col-sm-10">
<select name="color" class="form-control" id="color">
<option value=""></option>
<option style="color:#FF8C00;" value="#FF8C00">◼ Laranja</option>
<option style="color:#FF0000;" value="#FF0000">◼ Vermelho</option>
<option style="color:#58FA58;" value="#58FA58">◼ Verde</option>
</select>
</div>
</div>
<div class="form-group">
<label for="start" class="col-sm-2 control-label">Data/Hora Inicial</label>
<div class="col-sm-10">
<input type="datetime" name="start" class="form-control" id="start">
</div>
</div>
<div class="form-group">
<label for="end" class="col-sm-2 control-label">Data/Hora Final</label>
<div class="col-sm-10">
<input type="datetime" name="end" class="form-control" id="end">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label class="text-danger"><input type="checkbox" name="delete"> Eliminar Atividade</label>
</div>
</div>
</div>
<input type="hidden" name="id" class="form-control" id="id">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
<button type="submit" class="btn btn-primary">Guardar</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- /.container -->
<!-- jQuery Version 1.11.1 -->
<script src="/wordpress/wp-content/themes/busiprof/fullcalendar/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<!-- FullCalendar -->
<script src='/wordpress/wp-content/themes/busiprof/fullcalendar/js/moment.min.js'></script>
<script src='/wordpress/wp-content/themes/busiprof/fullcalendar/js/fullcalendar/fullcalendar.min.js'></script>
<script src='/wordpress/wp-content/themes/busiprof/fullcalendar/js/fullcalendar/fullcalendar.js'></script>
<script src='/wordpress/wp-content/themes/busiprof/fullcalendar/js/fullcalendar/locale/pt.js'></script>
<script type='text/javascript' src='/wordpress/wp-content/themes/busiprof/fullcalendar/js/fullcalendar/gcal.js'></script>
<script>
$(document).ready(function() {
var date = new Date();
var yyyy = date.getFullYear().toString();
var mm = (date.getMonth()+1).toString().length == 1 ? "0"+(date.getMonth()+1).toString() : (date.getMonth()+1).toString();
var dd = (date.getDate()).toString().length == 1 ? "0"+(date.getDate()).toString() : (date.getDate()).toString();
var dia = yyyy+"-"+mm+"-"+dd;
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
businessHours: [ // specify an array instead
{
dow: [ 2, 3 ], // Monday, Tuesday, Wednesday
start: '14:30', // 8am
end: '17:00' // 6pm
},
{
dow: [ 4, 5 ], // Thursday, Friday
start: '09:30', // 10am
end: '12:00' // 4pm
}
],
header: {
language: 'PT',
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek',
},
defaultDate: dia,
editable: true,
eventLimit: true, // allow "more" link when too many events
selectable: true,
selectHelper: true,
select: function(start, end) {
$('#ModalAdd #start').val((start).format('YYYY-MM-DD HH:mm:ss'));
$('#ModalAdd #end').val((end).format('YYYY-MM-DD HH:mm:ss'));
$('#ModalAdd').modal('show');
},
eventRender: function(event, element) {
element.bind('dblclick', function() {
$('#ModalEdit #id').val(event.id);
$('#ModalEdit #title').val(event.title);
$('#ModalEdit #contact').val(event.contact);
$('#ModalEdit #color').val(event.color);
$('#ModalEdit #start').val(moment(event.start).format('YYYY-MM-DD HH:mm:ss'));
$('#ModalEdit #end').val(moment(event.end).format('YYYY-MM-DD HH:mm:ss'));
$('#ModalEdit').modal('show');
});
},
eventDrop: function(event, delta, revertFunc) { // si changement de position
edit(event);
},
eventResize: function(event,dayDelta,minuteDelta,revertFunc) { // si changement de longueur
edit(event);
},
events: [
<?php foreach($events as $event):
$start = explode(" ", $event['start']);
$end = explode(" ", $event['end']);
if($start[1] == '00:00:00'){
$start = $start[0];
}else{
$start = $event['start'];
}
if($end[1] == '00:00:00'){
$end = $end[0];
}else{
$end = $event['end'];
}
?>
{
id: '<?php echo $event['id']; ?>',
title: '<?php echo $event['title']; ?>',
contact: '<?php echo $event['contact']; ?>',
start: '<?php echo $start ?>',
end: '<?php echo $end ?>',
color: '<?php echo $event['color']; ?>',
},
<?php endforeach; ?>
]
});
function edit(event){
if(confirm('Confirma a alteração da marcação?')) {
start = event.start.format('YYYY-MM-DD HH:mm:ss');
if(event.end){
end = event.end.format('YYYY-MM-DD HH:mm:ss');
}else{
end = start;
}
id = event.id;
Event = [];
Event[0] = id;
Event[1] = start;
Event[2] = end;
$.ajax({
url: './updatehoradataeventoPsi',
type: "POST",
data: {Event:Event},
success: function(confirm) {
if(confim = true){
alert('Atividade Guardada correctamente');
}else{
alert('Atividade não Guardada');
}
}
});
}
location.reload();
}
});
</script>
<script language="javascript">
$(function() {
$('#calendar').fullCalendar({
businessHours: true
});
});
</script>
After this code I added this script to sync, but it is not working:
<script language="javascript">
$(function() {
$('#calendar').fullCalendar({
googleCalendarApiKey: 'AIzaSyC-G0GjK7C03K35AFcFslNlVckYAe-Km0c',
events: {
googleCalendarId: '[email protected]'
}
});
});
</script>
But the event you set in fullcalendar does not appear in the gmail calendar, can you help?