Skip to content

Instantly share code, notes, and snippets.

@aminelch

aminelch/initfullcalendar.js

Last active May 31, 2020 07:36
Show Gist options
  • Save aminelch/a3384a4708c3199b1707d9270eb5ccd3 to your computer and use it in GitHub Desktop.
Save aminelch/a3384a4708c3199b1707d9270eb5ccd3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
initfullcalendar.js
window.onload=()=> {
let form = document.querySelector('#form-search')
let btnSubmit= form.querySelector("button[type=submit]")
const btnSubmitText= btnSubmit.textContent
form.addEventListener("submit",function(e){
e.preventDefault()
let searchField= form.querySelector('#q')
app.showAjaxAnimation()
const requestUri=form.getAttribute('href')
let xhr = new XMLHttpRequest();
xhr.open('POST',requestUri,true)
xhr.onreadystatechange = function () {
if(xhr.readyState === 4) {
if(xhr.status === 200)console.log(xhr.responseText)
else console.error(`error:${xhr.responseText}`)
}else{
app.removeAjaxAnimation()
}
};
// xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(new FormData(form));
})
let elementCalendar = document.getElementById("calendar")
let today = new Date,
y = today.getFullYear(),
m = today.getMonth(),
d = today.getDate();
//création d'un evenement à inserer dans l obj calendar
let events = [{
'title':'je suis un titre de test',
'start':'2020-05-26 09:10:00',
'end':'2020-05-26 11:30:00',
'backgroundColor':'silver',
color: 'yellow', // an option!
textColor: 'black' // an option!
},
{
'title':'je suis un titre de test 2',
'start' :'2020-05-26 14:15:00',
'end' :'2020-05-26 16:30:00',
'backgroundColor':'white',
color: 'yellow', // an option!
textColor: 'blue' // an option!
}
]
let events22=
[
{
title: 'All Day Event',
start: new Date(y, m, 1),
description: 'description for All Day Event',
className: 'event-red'
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d - 4, 6, 0),
allDay: !1,
className: 'event-rose'
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d + 3, 6, 0),
allDay: !1,
className: 'event-rose'
},
{
title: 'Meeting',
start: new Date(y, m, d - 1, 10, 30),
allDay: !1,
className: 'event-green'
},
{
title: 'Lunch',
start: new Date(y, m, d + 7, 12, 0),
end: new Date(y, m, d + 7, 14, 0),
allDay: !1,
className: 'event-red'
},
{
title: 'Md-pro Launch',
start: new Date(y, m, d - 2, 12, 0),
allDay: !0,
className: 'event-azure'
},
{
title: 'Birthday Party',
start: new Date(y, m, d + 1, 19, 0),
end: new Date(y, m, d + 1, 22, 30),
allDay: !1,
className: 'event-azure'
},
{
title: 'Click for Creative Tim',
start: new Date(y, m, 21),
end: new Date(y, m, 22),
url: 'http://www.creative-tim.com/',
className: 'event-orange'
},
{
title: 'Click for Google',
start: new Date(y, m, 21),
end: new Date(y, m, 22),
url: 'http://www.creative-tim.com/',
className: 'event-orange'
}
]
let calendar = new FullCalendar.Calendar(elementCalendar,{
//on appelle les plugins
plugins:['dayGrid','list','timeGrid','interaction','moment','bootstrap'],
// themeSystem: 'bootstrap',
buttonText:{today:'اليوم'},
buttonIcons:{
prev: 'left-single-arrow',
next: 'right-single-arrow',
prevYear: 'left-double-arrow',
nextYear: 'right-double-arrow',
},
defaultDate: today,
defaultView: 'dayGridMonth',
locale:'ar-tn',
timeZone: 'Africa/Tunis',
// timeZone: 'UTC',
titleFormat: {
month: 'long',
year: 'numeric',
day: 'numeric',
weekday: 'long'
} ,
// themeSystem: 'bootstrap',
header: {
left: 'prev,next today',
// center: 'title',
center: 'addEventButton, title',
right: 'dayGridMonth,timeGridWeek,timeGridDay, list'
},
eventRender: function(info) {
let tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
},
//associations des evenements(les events peuvent etre un obj js simple ou prevenant de bdd)
events:events22,
nowIndicator:true,
editable:true,
selectable:true,
views: {
list: { buttonText: 'قائمة' },
timeGridWeek: { buttonText: 'الأسبوع' },
timeGridDay: { buttonText:'يومي' },
dayGridMonth:{buttonText:'الشهر'}
// dayGridMonth,timeGridWeek,timeGridDay, list
},
customButtons: {
addEventButton: {
text: 'new event',
icon:'fa fa-lock',
click: function() {
// var dateStr = new Date('2020-05-27 15:20:23')
$('#newEvent').on('show.bs.modal',function (e) {
console.log('debug=== modal is showing ....')
$('#btnAddEvent').on('click',function (e) {
console.log('choosing title:' + $('#eventTitleField').val())
console.log('choosing color:' + $('#eventColorField').val())
console.log('choosing startDate:' + $('#startDate').val())
console.log('choosing startDate:' + $('#endDate').val())
//on fait l'ajout de l'event ici !!
//construction de l'obj event
let ev = {
title: $('#eventTitleField').val(),
start: $('#startDate').val(),
end: $('#startDate').val(),
backgroundColor: $('#eventColorField').val()
}
//association de l obj au calendar
// calendar.addEvent(ev,false)
calendar.fullCalendar('renderEvent',ev,true)
calendar.unselect()
console.log('debug=== Event added with success ....')
//on déclenche l'event hidden.bs.modal de modal
$('#newEvent').modal('hide')
//on vide les inputs
$('#newEvent input[type=text]').each(function(){
$(this).val('')
})
})
}).on('hidden.bs.modal',function(e){
$('newEvent').modal('dispose')
console.log('dispose event called')
}).modal('show')
}
}
},
navLinks:true, // can click day/week names to navigate views
dateClick: function(arg) {
// let m = moment(arg.date, calendar); // calendar is required
console.log('clicked on ' + arg.date);
},
eventDrop: (infos)=>{
console.log("event start at=" + infos.event.start)
Swal.fire({
title: 'تأكيد',
text: "هل تود نقل الحدث ؟",
icon: 'info',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'نعم',
cancelButtonText: 'لا'
}).then((result) => {
if (!result.value) {
infos.revert()
}
})
},
select: function (arg) {
Swal.fire({
title: 'إنشاء حدث جديد',
html: '<div class="form-group"><input class="form-control" placeholder="عنوان الحدث" id="input-field" required></div>',
showCancelButton: !0,
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
buttonsStyling: !1
}).then((result) => {
if(result.value){
let eventTitle = $('#input-field').val()
const newEvent= {
title: eventTitle,
start: arg.start,
end: arg.end,
backgroundColor:app.randomColor(),
allDay:arg.allDay
}
// calendar.fullCalendar('renderEvent',newEvent, !0)
$.ajax({
type: 'POST',
url: '/admin/planificator/api/event/add/',
sync:true,
data: newEvent,
/*beforeSend:() =>{
// Wed May 13 2020 01:00:00 GMT+0100 (Central European Standard Time)
//convertir l objet date en timestamp pour simplifier le traitement coté backend
// let toTimestamp = strDate => Date.parse(strDate)
// newEvent.test=newEvent.start //pour le test
// const startTimeStamp = toTimestamp(newEvent.start)
//const endTimeStamp = toTimestamp(newEvent.end)
// newEvent.start=startTimeStamp
// newEvent.end=endTimeStamp
},*/
success:(data, textStatus, xhr)=>{
console.info("success===" + data)
calendar.addEvent(newEvent)
calendar.unselect()
},
error: (xhr)=> {
app.showNotification("danger","للأسف حدث خطأ ما")
console.error("error=== statut:"+xhr.statusCode().statusText)
},
done:()=> app.removeAjaxAnimation()
});
}
// app.event.showSuccess() //afficher une notification du success
}).catch (Swal.noop)
},
eventClick:function (event) {
// console.log(eventClickInfo.event.title)
// console.log(eventClickInfo.event.classNames)
// alert('Event: ' + info.event.title);
// alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
// alert('View: ' + info.view.type);
// change the border color just for fun
// info.el.style.borderColor = 'red';
// console.log(event)
let detailsField=$('#detailField')
// let infosList=[
// jsEvent.start,
// jsEvent.end,
// event._calendar.state.currentDate
// ]
// let elemli;
// for (let i = 0; i < infosList.length ; i++) {
// elemli=+ '<li>'+ infosList[i] +'</li>'
// }
console.log(event)
$('<ul><li>1323</li></ul>').appendTo(detailsField)
// $('#detailField').html(info.event.title)
$('#eventDetail').modal("show")
},
})
calendar.render()
//le button ajouter un event
$(".fc-addEventButton-button")
.removeClass( "btn btn-primary" )
.addClass( " btn btn-rose" )
.attr('data-toggle','tooltip')
.attr('title','إنشاء نشاط جديد')
.html('<i aria-hidden="true" class="fa fa-calendar-plus-o"></i>')
// .click(function () {
// $('#newEvent').modal('show')
// })
//button list
$('.fc-list-button')
.addClass('btn btn-success')
.attr('data-toggle','tooltip')
.attr('title','قائمة')
.html('قائمة <nbsp;<i class="fa fa-list"></i>')
}
Raw
planificatorController.php
<?php
namespace App\Controller\Admin;
use App\AppUtils;
use App\Entity\Event;
use App\Form\EventType;
use DateTime;
use DateTimeZone;
use Doctrine\Persistence\ObjectManager;
use Exception;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\IsGranted;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
class PlanificatorController extends AbstractController
{
/**
* @Route("/admin/planificator", name="admin.planificator.index")
* @IsGranted("ROLE_STAFF")
*/
public function index()
{
return $this->render('admin/planificator/index.html.twig', [
'controller_name' => 'PlanificatorController',
]);
}
/**
* @Route("/admin/planificator/new", name="admin.planificator.new")
* @IsGranted("ROLE_STAFF")
* @param Request $request
* @param ObjectManager $manager
* @return Response
*/
public function new(Request $request, ObjectManager $manager): Response
{
$event = new Event();
$form = $this->createForm(EventType::class, $event);
$form->handleRequest($request);
if ($form->isSubmitted() && $form->isValid()) {
$manager->persist($event);
$manager->flush();
$this->addFlash('success', 'لقد تمت الإضافة بنجاح');
return $this->redirectToRoute('admin.planificator.index', [], 301);
}
return $this->render('admin/planificator/new.html.twig', [
"form" => $form->createView()
]);
}
/**
* @Route("/admin/planificator/api/event/add/",format="json", methods={"POST|GET"},name="admin.planificator.api.add")
* @IsGranted("ROLE_STAFF")
* @param Request $request
* @param ObjectManager $manager
* @return Response
* @throws Exception
*/
public function add(Request $request, ObjectManager $manager): Response
{
// sleep(1);
$form = $request->request->all();
//Thu May 07 2020 01:00:00 GMT+0100 (Central European Standard Time)
// $format ='D M m Y h:i:s e+O \Central European Standard Time';
$format = 'D/m/Y H:i:s';
// $start= DateTime::createFromFormat($format, $form['start']);
// $dstart = date("c", (int)$form['start']);
// $dend = date("c", (int)$form['end']);
$dtStart = new DateTime(strtotime($form['start']));
$dtStart->setTimezone(new DateTimeZone('Europe/Amsterdam'));
$dtEnd = new DateTime(strtotime($form['end']));
$dtEnd->setTimezone(new DateTimeZone('Europe/Amsterdam'));
$event = new Event();
$event->setTitle($form['title'])
->setUrl(null)
->setStart(new DateTime($dtStart))
->setEnd(new DateTime($dtEnd))
->setTextColor(AppUtils::randomColor());
return $this->json($event, 200);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment