todoeventcalender
Laravel 5.4 Todo Event Calender
This is simple event calender.which is developed using fullcalender , (*1)
Following are the step to use this calender
Step 1:copy vender using composer
composer require pratik007kumar/todoeventcalender:"dev-master"
or
"require": {
"pratik007kumar/todoeventcalender": "dev-master"
}
and run composer update
step 2:Copy providers to config/app.php
'providers' => [, (*2)
Pratik\ToDoEventCalender\TodoEventCalenderServiceProvider::class,, (*3)
], (*4)
step 3: Run php artisan vendor:publish
step 4: Run php artisan migrate
step 5: copy following css file in head tag
<link rel="stylesheet" href="{{ asset('vendor/pratik/todocalender/plugins/bootstrap/css/bootstrap.min.css') }}">
<link href="{{asset('vendor/pratik/todocalender/plugins/fullcalendar/fullcalendar.min.css')}}" rel='stylesheet' />
<link href="{{asset('vendor/pratik/todocalender/plugins/daterangepicker/daterangepicker.css')}}" rel='stylesheet' />
<link href="{{asset('vendor/pratik/todocalender/plugins/fullcalendar/fullcalendar.print.min.css')}}" rel='stylesheet' media="print" />
<style type="text/css">
.label{ color: #000; }
.error{ color: #f00;
font-size: 10px;
}
</style>
step 6: copy html code where you want to display Todo Calender
<div class="container">
<div class="col-md-12">
<div id='calendar'></div>
</div>
</div>
<div id="calendarModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form id="calender_frm" action="#" method="post">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
<h4 id="modalTitle" class="modal-title"></h4>
</div>
<div id="modalBody" class="modal-body"> </div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" >Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
step 7: Copy all js file before closing html tag
<script src="{{asset('vendor/pratik/todocalender/plugins/fullcalendar/lib/jquery.min.js')}}"></script>
<script src="{{asset('vendor/pratik/todocalender/plugins/bootstrap/js/bootstrap.js')}}"></script>
<script src="{{asset('vendor/pratik/todocalender/plugins/bootstrap/js/bootstrap-tooltip.js')}}"></script>
<script src="{{asset('vendor/pratik/todocalender/plugins/daterangepicker/daterangepicker.js')}}"></script>
<script src="{{asset('vendor/pratik/todocalender/plugins/fullcalendar/fullcalendar.min.js')}}"></script>
<script src="{{asset('vendor/pratik/todocalender/plugins/jquery.validate/jquery.validate.js')}}"></script>
<script >
$(document).ready(function() {
$.ajaxSetup(
{
headers:
{
'X-CSRF-Token': $('input[name="_token"]').val()
}
});
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
timezone: 'Asia/Kolkata',
defaultDate: '{{date("Y-m-d")}}',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: function(start, end, timezone, callback) {
$.ajax({
url: '{{url('/calender/getcalender')}}',
dataType: 'json',
data: {
// our hypothetical feed requires UNIX timestamps
start: start.unix(),
end: end.unix()
},
success: function(obj) {
var events = [];
$.each(obj, function(index, value) {
events.push({
id: value['id'],
start: value['start'],
title: value['title'],
end: value['end'],
description: value['description'],
//all data
});
});
callback(events);
}
});
},
eventClick: function(event, jsEvent, view) {
$('#modalTitle').html('Update Event ');
$.ajax({
method: "POST",
url: "{{url('/calender/getfrm')}}",
data:{
_token: "{{ csrf_token() }}",
id:event.id
}
}).done(function( data ) {
if(data.status == 1){
$('#modalBody').html(data.frm);
$('input[name="daterange"]').daterangepicker({
timePicker: true,
timePickerIncrement: 30,
locale: {
format: 'DD/MM/YYYY h:mm A'
}
});
$('#calendarModal').modal();
}else{
alert(data.message);
}
});
},
dayClick: function(date,event, jsEvent, view) {
date_o= new Date(date)
dt=date.toString("Y/m/d hh:mm.ss");
$('#modalTitle').html('New Event Form');
$.ajax({
method: "POST",
url: "{{url('/calender/getfrm')}}",
data:{
_token: "{{ csrf_token() }}",
cal_date:dt,
dat:date_o.getFullYear()+"-"+(date_o.getMonth()+1)+"-"+date_o.getDate(),
// tm:date.getTime()
}
}).done(function( data ) {
if(data.status == 1){
$('#modalBody').html(data.frm);
$('input[name="daterange"]').daterangepicker({
timePicker: true,
timePickerIncrement: 30,
locale: {
format: 'DD/MM/YYYY h:mm A'
}
});
$('#calendarModal').modal();
}else{
alert(data.message);
//$('.error-favourite-message').html(msg.message);
}
});
},
eventResize: function(event, delta, revertFunc) {
$.ajax({
method: "POST",
url: "{{url('/calender/resize')}}",
data:{
_token: "{{ csrf_token() }}",
id:event.id,
start_dt:event.start.format(),
end_dt:event.end.format(),
// tm:date.getTime()
},
success: function (data) {
if(data.status){
$('#calendar').fullCalendar( 'refetchEvents' )
}
}
});
},
eventDrop: function(event, delta, revertFunc) {
// alert(event.title + " was dropped on " + event.start.format()+' to '+event.end.format());
$.ajax({
method: "POST",
url: "{{url('/calender/resize')}}",
data:{
_token: "{{ csrf_token() }}",
id:event.id,
start_dt:event.start.format(),
end_dt:event.end.format(),
// tm:date.getTime()
},
success: function (data) {
if(data.status){
$('#calendar').fullCalendar( 'refetchEvents' )
}
}
});
}
});
$("#calender_frm").validate({
rules: {
title: {
required: true,
},
daterange: {
required: true,
},
},
messages: {
title: {
required: "Please enter Todo Title",
},
daterange: {
required: "Please enter Select Date and Time",
},
},
submitHandler: function(form) {
$.ajax({
method: "POST",
url: "{{url('/calender/save')}}",
data:$(form).serialize(),
success: function (data) {
if(data.status){
alert(data.msg);
// make_calender();
$('#calendar').fullCalendar( 'refetchEvents' )
$('#calendarModal').modal('hide');
// make_calender();
}else{
alert(data.msg);
}
}
});
},
});
});
function deleteEvent(id) {
if(confirm("Do you want to Delete event")){
$.ajax({
method: "POST",
url: "{{url('/calender/delete')}}",
data:{_token: "{{ csrf_token() }}",id:id},
success: function (data) {
if(data.status){
// alert(data.msg);
// make_calender();
$('#calendar').fullCalendar( 'refetchEvents' )
$('#calendarModal').modal('hide');
// make_calender();
}else{
alert(data.msg);
}
}
});
}
}
</script>
step end: you can use calender. for demo you can www.yourdomain.com/calender or localhost/yourapp/calender
Wallogit.com
