JavaScript
We need to install toastr (for notification) and moment(for date formatting) libraries. To install toastr from npm package, we run this command npm install toastr --save and add window.toastr = require('toastr'); to resources->js->bootstrap.js file. For moment, we do the similar thing, npm install moment --save as below file
bootstrap.js
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
window.toastr = require('toastr');
window.moment = require('moment');
require('bootstrap');
} catch (e) {}
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
Create a calender.js file in public->js folder. In the Laravel form, we need csrf-token therefore we need to add it to the AJAX call function.
We need to install toastr (for notification) and moment(for date formatting) libraries. To install toastr from npm package, we run this command npm install toastr --save and add indow.toastr = require('toastr'); to resources->js->bootstrap.js file. For moment, we do the similar thing, npm install moment --save as below file.
We have use full-calender from https://fullcalendar.io/docs. In summary, we have display two views of the calendar; listWeek, month. To display the list of events/leave applications, we call /calendar route. Based on the type of event (whole day or schedule time), **start_time and end_time will hide or display, and wholeDay will check or uncheck **. With the help of the moment js library, we format date var end = moment(event.end).format('Y-MM-DD');
We are using bootstrap modal box, to open programmatically use use ('#calendarModal').modal(); We are using toastr librarary, to display success message we use this code toastr.success(message, 'Event');
For updating and deleting a record, we used /calenderAjax route.
calender.js
$(document).ready(function () {
$("#btnDelete").hide();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'listWeek,month'
},
defaultView: 'listWeek',
events: "/calender",
eventColor: '#378006',
displayEventTime: true,
displayEventEnd:true,
eventRender: function (event, element, view) {
if (event.wholeDay === 1) {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
eventClick: function(event, jsEvent, view) {
if(event.leave == '' || event.leave == null)
{
$('#title').val(event.title);
$('#type').val('update');
var start = moment(event.start).format('Y-MM-DD');
$("#start").val(start);
$("#id").val(event.id);
if(event.wholeDay == 0){
$("#start_time").show();
$("#end_time").show();
$("#wholeDay").prop( "checked", false );
var end = moment(event.end).format('Y-MM-DD');
$("#end").val(end);
var start_time = moment(event.start).format('HH:mm');
$("#start_time").val(start_time);
var end_time = moment(event.end).format('HH:mm');
$("#end_time").val(end_time);
}
else //whole day
{
$("#start_time").hide();
$("#end_time").hide();
$("#wholeDay").prop( "checked", true );
var end = moment(event.end).subtract(1, "days").format('Y-MM-DD');
$("#end").val(end);
}
$('#modalBody').html(event.description);
$('#eventUrl').attr('href',event.url);
$("#btnDelete").show();
var title = event.title.split("-");
$("#title").val($.trim(title[0]));
$('#calendarModal').modal();
}
},
});
});
function displayMessage(message) {
toastr.success(message, 'Event');
}
function addCalenderModal(){
//reset
$("#type").val('add');
$("#start_time").val('');
$("#end_time").val('');
var dt = new Date();
var start_time = dt.getHours() + ":" + dt.getMinutes();
$("#start_time").val(start_time);
$("#start_time").show();
var end_time = dt.getHours() + 1 + ":" + dt.getMinutes();
$("#end_time").val(end_time);
$("#end_time").show();
$("#title").val('');
$("#type").val('add');
$("#wholeDay").prop( "checked", false );
$("#btnDelete").hide()
$('#calendarModal').modal();
}
$("#wholeDay").change(function() {
if(this.checked) {
$("#start_time").hide();
$("#end_time").hide();
}
else{
$("#start_time").show();
$("#end_time").show();
}
});
$("#btnDelete").click(function() {
var id = $("#id").val();
$.ajax({
url: "/calenderAjax",
data: {
id: id,
type: "delete"
},
type: "POST",
success: function (data, statusText, xhr) {
displayMessage("Event delete Successfully");
location.reload();
},
error: function (xhr) {
if (xhr.status == 403) {
alert('Unauthorized');
}
},
});
});
$("#btnSave").click(function() {
var error = "";
if($("#title").val() == ''){
error += "Title is required\n";
}
start = moment($("#start").val()).format('Y-MM-DD');
end = moment($("#end").val()).format('Y-MM-DD');
if(moment(end).isBefore(start)){
error += "End date should be same or after than start date";
}
if(error != ""){
alert(error);
return false;
}
var title = $("#title").val();
var wholeDay = 0;
if($("#wholeDay").is(":checked")){
wholeDay= 1;
}
var start;
var end;
if(wholeDay == 1){
start = moment($("#start").val()).format('Y-MM-DD');
end = moment($("#end").val()).format('Y-MM-DD');
}
else {
start = moment($("#start").val()+" " + $("#start_time").val()).format('Y-MM-DD HH:mm');
end = moment($("#end").val()+" " + $("#end_time").val()).format('Y-MM-DD HH:mm');
}
var type= $("#type").val();
var id = $("#id").val();
$.ajax({
url: "/calenderAjax",
data: {
title: title,
id:id,
start: start,
end: end,
type: type,
wholeDay: wholeDay
},
type: "POST",
success: function (data, statusText, xhr) {
displayMessage("Event delete Successfully");
location.reload();
},
error: function (xhr) {
if (xhr.status == 403) {
alert('Unauthorized');
}
},
});
});
$('#start').on('input',function(e){
var start = $(this).val();
$("#end").val(start);
});
Create a main.js file in public->js folder. In the delete_record function, it receive three parameters; id, ajaxURL, redirectURL. The id is the primary key of record, ajaxURL is the URL of the method to be executed and redirectURL is the URL that will redirect upon execution complete.
Rest of the js code is to toggle checkboxes of records in user permission view. To understanding how it works, please refer to Checkbox Component where we used same technique
main.js
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
function delete_record(id, ajaxURL, redirectURL){
$.ajax({
url: ajaxURL,
data: {
id:id
},
type: "DELETE",
success: function (data, statusText, xhr) {
displayMessage("Delete Successfully");
setTimeout(function(){
window.location.href = redirectURL;
}, 1000);
},
error: function (xhr) {
if (xhr.status == 403) {
alert('Unauthorized');
}
},
});
}
function displayMessage(message) {
toastr.success(message, 'Record');
}
$(function(){
$('.company_checkall').click(function(){
if (this.checked) {
$(".checkboxes_company").prop("checked", true);
} else {
$(".checkboxes_company").prop("checked", false);
}
});
$(".checkboxes_company").click(function(){
var numberOfCheckboxes = $(".checkboxes_company").length;
var numberOfCheckboxesChecked = $('.checkboxes_company:checked').length;
if(numberOfCheckboxes == numberOfCheckboxesChecked) {
$(".company_checkall").prop("checked", true);
} else {
$(".company_checkall").prop("checked", false);
}
});
});
$(function(){
$('.holiday_checkall').click(function(){
if (this.checked) {
$(".checkboxes_holiday").prop("checked", true);
} else {
$(".checkboxes_holiday").prop("checked", false);
}
});
$(".checkboxes_holiday").click(function(){
var numberOfCheckboxes = $(".checkboxes_holiday").length;
var numberOfCheckboxesChecked = $('.checkboxes_holiday:checked').length;
if(numberOfCheckboxes == numberOfCheckboxesChecked) {
$(".holiday_checkall").prop("checked", true);
} else {
$(".holiday_checkall").prop("checked", false);
}
});
});
$(function(){
$('.workingday_checkall').click(function(){
if (this.checked) {
$(".checkboxes_workingday").prop("checked", true);
} else {
$(".checkboxes_workingday").prop("checked", false);
}
});
$(".checkboxes_workingday").click(function(){
var numberOfCheckboxes = $(".checkboxes_workingday").length;
var numberOfCheckboxesChecked = $('.checkboxes_workingday:checked').length;
if(numberOfCheckboxes == numberOfCheckboxesChecked) {
$(".workingday_checkall").prop("checked", true);
} else {
$(".workingday_checkall").prop("checked", false);
}
});
});
$(function(){
$('.department_checkall').click(function(){
if (this.checked) {
$(".checkboxes_department").prop("checked", true);
} else {
$(".checkboxes_department").prop("checked", false);
}
});
$(".checkboxes_department").click(function(){
var numberOfCheckboxes = $(".checkboxes_department").length;
var numberOfCheckboxesChecked = $('.checkboxes_department:checked').length;
if(numberOfCheckboxes == numberOfCheckboxesChecked) {
$(".department_checkall").prop("checked", true);
} else {
$(".department_checkall").prop("checked", false);
}
});
});
$(function(){
$('.leaveType_checkall').click(function(){
if (this.checked) {
$(".checkboxes_leaveType").prop("checked", true);
} else {
$(".checkboxes_leaveType").prop("checked", false);
}
});
$(".checkboxes_leaveType").click(function(){
var numberOfCheckboxes = $(".checkboxes_leaveType").length;
var numberOfCheckboxesChecked = $('.checkboxes_leaveType:checked').length;
if(numberOfCheckboxes == numberOfCheckboxesChecked) {
$(".leaveType_checkall").prop("checked", true);
} else {
$(".leaveType_checkall").prop("checked", false);
}
});
});
$(function(){
$('.calendar_checkall').click(function(){
if (this.checked) {
$(".checkboxes_calendar").prop("checked", true);
} else {
$(".checkboxes_calendar").prop("checked", false);
}
});
$(".checkboxes_calendar").click(function(){
var numberOfCheckboxes = $(".checkboxes_calendar").length;
var numberOfCheckboxesChecked = $('.checkboxes_calendar:checked').length;
if(numberOfCheckboxes == numberOfCheckboxesChecked) {
$(".calendar_checkall").prop("checked", true);
} else {
$(".calendar_checkall").prop("checked", false);
}
});
});
$(function(){
$('.userAccount_checkall').click(function(){
if (this.checked) {
$(".checkboxes_userAccount").prop("checked", true);
} else {
$(".checkboxes_userAccount").prop("checked", false);
}
});
$(".checkboxes_userAccount").click(function(){
var numberOfCheckboxes = $(".checkboxes_userAccount").length;
var numberOfCheckboxesChecked = $('.checkboxes_userAccount:checked').length;
if(numberOfCheckboxes == numberOfCheckboxesChecked) {
$(".userAccount_checkall").prop("checked", true);
} else {
$(".userAccount_checkall").prop("checked", false);
}
});
});
$(function(){
$('.leave_entitlements_checkall').click(function(){
if (this.checked) {
$(".checkboxes_leave_entitlements").prop("checked", true);
} else {
$(".checkboxes_leave_entitlements").prop("checked", false);
}
});
$(".checkboxes_leave_entitlements").click(function(){
var numberOfCheckboxes = $(".checkboxes_leave_entitlements").length;
var numberOfCheckboxesChecked = $('.checkboxes_leave_entitlements:checked').length;
if(numberOfCheckboxes == numberOfCheckboxesChecked) {
$(".leave_entitlements_checkall").prop("checked", true);
} else {
$(".leave_entitlements_checkall").prop("checked", false);
}
});
});
$(function(){
$('.leave_type_approving_checkall').click(function(){
if (this.checked) {
$(".checkboxes_leave_type_approving").prop("checked", true);
} else {
$(".checkboxes_leave_type_approving").prop("checked", false);
}
});
$(".checkboxes_leave_type_approving").click(function(){
var numberOfCheckboxes = $(".checkboxes_leave_type_approving").length;
var numberOfCheckboxesChecked = $('.checkboxes_leave_type_approving:checked').length;
if(numberOfCheckboxes == numberOfCheckboxesChecked) {
$(".leave_type_approving_checkall").prop("checked", true);
} else {
$(".leave_type_approving_checkall").prop("checked", false);
}
});
});
$(function(){
$('.user_account_approving_checkall').click(function(){
if (this.checked) {
$(".checkboxes_user_account_approving").prop("checked", true);
} else {
$(".checkboxes_user_account_approving").prop("checked", false);
}
});
$(".checkboxes_user_account_approving").click(function(){
var numberOfCheckboxes = $(".checkboxes_user_account_approving").length;
var numberOfCheckboxesChecked = $('.checkboxes_user_account_approving:checked').length;
if(numberOfCheckboxes == numberOfCheckboxesChecked) {
$(".user_account_approving_checkall").prop("checked", true);
} else {
$(".user_account_approving_checkall").prop("checked", false);
}
});
});
$(function(){
$('.leave_application_checkall').click(function(){
if (this.checked) {
$(".checkboxes_leave_application").prop("checked", true);
} else {
$(".checkboxes_leave_application").prop("checked", false);
}
});
$(".checkboxes_leave_application").click(function(){
var numberOfCheckboxes = $(".checkboxes_leave_application").length;
var numberOfCheckboxesChecked = $('.checkboxes_leave_application:checked').length;
if(numberOfCheckboxes == numberOfCheckboxesChecked) {
$(".leave_application_checkall").prop("checked", true);
} else {
$(".leave_application_checkall").prop("checked", false);
}
});
});
$(function(){
$('.menu_checkall').click(function(){
if (this.checked) {
$(".checkboxes_menu").prop("checked", true);
} else {
$(".checkboxes_menu").prop("checked", false);
}
});
$(".checkboxes_menu").click(function(){
var numberOfCheckboxes = $(".checkboxes_menu").length;
var numberOfCheckboxesChecked = $('.checkboxes_menu:checked').length;
if(numberOfCheckboxes == numberOfCheckboxesChecked) {
$(".menu_checkall").prop("checked", true);
} else {
$(".menu_checkall").prop("checked", false);
}
});
});
We need to compile the CSS/SCSS/JavaScript to the public folder
npm run dev
