How to Use Fullcalendar in Laravel 8

hello friends in this video we will learn how to use full calendar in laravel 8 framework with example of how can we create event how can we change event date and time and lastly we will learn how to remove event this video tutorial on laravel 8 framework with implementation of full calendar plugin under this laravel 8 framework so under this video you can find step by step how to implement full calendar in laravel framework here we will simply create crud application with full calendar under laravel 8 framework you can easily create event edit previously created event by simple drag and drop or resize event for change time and delete particular event so now let's start discussing this topic so first we want to download latest version of laravel framework so we have go to command prompt and go to directory in which we want to download and install laravel framework now here we have write command like composer create project with prefer district laravel laravel with folder name laravel full calendar so this command will make laravel full calendar directory and under this directory it will download laravel framework here we can see downloading process has been start and it will download hundred plus classes will be download with this laravel framework so it will take some time now here we can see download process has been complete so we have go text editor in which we will open this laravel framework file so here friends we can see that under this text editor we can see laravel framework file has been open now first we want to make database connection so here in browser we can see our testing database so we will make event stable under this database by using laravel application so we have go to text editor and here we have open dot environment and under this file we have to define my sql database name set to testing and in user name we have write root and in password we have set to blank so by define this data it will make mysql database connection next we want to create migration and model class so we have go to command prompt and here first we have go to our working directory in which we have installed laravel framework and after this we have write php artisan make double colon migration create events table so this command will make migration file under database so here we have go database folder and under this we can see migrations folder and here we can see createeventstable.php migration file now we have opened this file so here we can see create events table class with two method like up and down method up method will create table in my sql database and down method will drop table from mysql database here in up method we can see that event stable create already right under this method with id table column created and updated at table column now we want to add title table column so here we have write dollar table object with string method and under this we have write title after this we want to add start table column so here we have write dollar table object with date time method and under this we have write start so it will create start table column with date time data type and same way we want to create and table column so here we have write dollar table object with date time method and under this we have right end so it will create end table column with date time data type so after define table column now we have go to command prompt and here we have run php artisan migrate command so it will start run migration and it will create event stable in mysql testing database so here we can see that in testing database event stable has been created with table column like id title start end created at and updated at table column now we want to create event model under application slash models folder so here we have go to application folder and then after go to models folder and here we have right click and create new file under this file first we have write name space key with app folder name slash models folder name so here we have grouped this class as models class and now we have saved this file with events.php file below this we have import has factory class and model class under this event.php class next we want to create event model class so here we have write class keyword with class name event which extends model class so here we have define event class name which will extends model class under this class first we have write use has factory it will create a new factory instance for the model below this we have write protected statement with dollar fillable variable is equal to event table column name like title start and end so this three column data can be changed by user so here our event model class is ready next we want to create controller class so we have go to command prompt and here we have run php artisan make with double colon controller with file name full calendar controller so this command will make full calendar controller.php file under this application http controllers folder now we have go to text editor and here we have go to application slash http slash controllers folder and here we have see full calendar controller.php file so we have opened this file under this file first we want to import event model class so here we have write use app forward slash event class next under this class we have make index function with argument like request keyword with dollar request variable this is root method of this controller class under this method we have write return statement with view method and under this we have write full calendar so when we have called this method then it will load full calendar view file in browser now friends here in resources folder and go to views folder we have already make full calendar.blade.php file so we have opened this file under this file we have already load bootstrap library file jkuri library file full calendar library file so now we have easily used curry full calendar plugin with laravel framework so first under this file here we have write meta tag with name is equal to csrf token and in content attribute we have write laravel expression and between this we have write csrf token method so it will generate hash code for secure send data to server for preventing cross site request forgery protection after this for load calendar on web page here we have create one division tag with id is equal to calendar we will load full calendar under this division tag now we have go to jquery code part and here first we have write dollar ajax setup function so this function will set the default values for the future ajax requests under this function we have write headers option so under this option we can define header tag with values so under this we have write csrf token as name and under value we have write dollar with meta tag with name is equal to csrf token with attribute method and under this we have write content so it will fetch content attribute value and when event ajax request has been sent this data will be sent with ajax request after this we want to activate full calendar plugin so we have write calendar variable is equal to dollar with division tag id calendar with full calendar method so this method will activate full calendar plugin under this calendar division tag now we have checked this output in browser so for check output in browser first we want to set route for index method so we have go to routes folder and open web.php file under this file first we want to import full calendar controller class so here we have write use statement with app folder slash http slash controllers slash full calendar controller class in laravel 8 framework we want to first define controller class file under this web.php file now for set route for index method here we have write route class with get method with two argument in first argument we have write full calendar and in second argument we have write array with two index in first index we have write full calendar controller class and in second index we have write index method name so now when we have enter laravel application base url slash full calendar then it will load content of index method and lastly we have go to command prompt and write php artisan self command this command will start laravel server and provide us base url of our laravel application so friends here we have enter base url slash full calendar so on web page we can see calendar on web page but when we have click on this calendar nothing has happened but here we can change month so now we have go to full calendar view file and under this full calendar method we have set editable option set to true so by using this editable option we can drag and resize event on calendar below this we have write second option header under this option we can define button and title button which will be appear at the top of this plugin so under this first we have right left option with button like previous next and today same way in second option we have right center option and here we have right title so it will display current month name with yeah in third option we have right right side option and here we have write month agenda week and agenda day this option will display month week and day button on right header of this plugin so here after writing this option we can see previous next and today button on left side month name with here in center and on right side we can see month week and day button now we have go to view file first we want to display event stable data on web page so here we have write events option and under this we have write slash full calendar so this option will send request to this url and it will get data from index method of full calendar controller in json format and then after we can see particular day event on calendar now we have go to index method of full controller class and here we have write if statement and under condition we have write dollar ajax request with ajax method so this condition will check it has received ajax request then it will execute if block of code under this block we have write dollar data variable is equal to event class with where date method with three argument in first argument we have write start column name in second argument we have write greater than equal to and in third argument we have write dollar request variable with start variable so this method will add where date statement to the query same way for end date here we have again adware date method with three argument in first argument we have write table column end in second argument we have write less than equal to and in last column we have write dollar request variable with end variable value so this method will also add where date statement to the query after this we have write get method and under this we have defined table column name so here we have write id title start and end column name so this method will execute above select query and return data which has been stored under dollar data variable next we want to send data to events option so here we have write return statement with response method with json method and under this we have write dollar data variable so it will send data in json format now we have check output in browser friends here we have first refreshed this page after refresh page here we have see ajax request has been sent on page load for fetch data from event stable and display on calendar but currently there are no data in database so it display nothing on web page and here we can not select any particular date cell so for we have go to view file and here we have right select table option set to true this option will allow user to highlight to multiple days or even time slots by clicking or dragging cursor below this we have right select helper option set to true it will draw a placeholder while user has dragging any event after writing to new option now we can see here when we have click on any date cell then background color of that cell has been changed and here we can also select multiple cell also now we want to add new event and display on this calendar on particular date so here we have right select option with callback function with three argument like start end and all day under this function we have write title variable is equal to prompt with event title this code will pop up one block with enter event title details which it will be store into this title variable after this we have write if statement and under condition we have write title variable this condition will check if this variable has some value then it will execute if block of code under this block we have defined start variable is equal to dollar dot full calendar dot format date function with two arguments like start and date time format this javascript code will generate current date time value and store into start variable same way we write end variable is equal to dollar dot full calendar dot format date function with argument like end and date time format this code will generate end date time and store into end variable now we have start write ajax request and under this first we have write url option and here we have write slash full calendar slash action so it will send request to action method of full calendar controller in second option we have write type and under this we can define send data method to server so here we have use post method for sending data to the server in third option we have write data option under this option we can define which data we want send to server so here we have send title start end and type variable with add as value data has been sent to server and lastly we have write success callback function this function will be called if ajax request completed successfully under this function first we want to refresh event data on calendar so we have write calendar variable dot full calendar method and under this method we have write refetch event this method will reload event data on calendar then after we have write alert pop-up with message like event created successfully this message will be pop-up on web page now we have go to full calendar controller class and here we have make action method with argument like dollar request variable this method will received ajax request for ad event data under this method we have write if statement and under condition we have write dollar request variable with ajax method this condition will check it is ajax request then only it will execute if block of code under this block we have write if statement and under condition we have write dollar request variable with type is equal to add if this variable value is equal to add then only it will execute if block of code under this block we have write dollar event variable is equal to event class with create method this method will save a new model and return the instance under this method we have to define data in array format so here in first key we have write title table column name and in value we have write dollar request variable with title variable value in second key we have write start table column name and in value we have write dollar request variable with start table column name in third key we have right end table column name and in value we have write dollar request variable with end so here we have defined all required data under this method so this method will insert this data in my sql database now we want to send response to ajax request in json format so here we have write return statement with response method with json method and under this we have write dollar event so here event at code is ready now we have check output in browser but before check output first we want to set the route of action method so we have go to web.php file and here we have write route class with post method with two arguments in first argument we have write slash full calendar slash action and in second argument we have write array with two index in first index we have write full calendar controller class and in second argument we have write method name action so when in browser we have write full calendar slash action then it will execute action method of full calendar controller class now we have check output in browser friends here we can see calendar now we want to schedule event on 10 march so we have simply click on 10 merge cell then after one pop on web page has been appear with enter event data so we have enter event details and click on ok button after click on ok button here our event has been scheduled on 10 march now we want to define time of events so here we have go today button and go to 10 march day here event has been booked for whole day but we want schedule event for only between 11 to 2 so here can set by simple drag and drop but this will not be update data in database so for this we have go to view file and here we have write option editable is equal to true it will allowed to edit event data after this we have write event resize method with callback function with event and delta argument this method will be execute when we have resize event on calendar under this function we have write start variable is equal to dollar dot full calendar dot format date function with two argument like event dot start and date time format this javascript code will generate current date and time value and store into start variable same way we have right end variable is equal to dollar full calendar dot format date function with two argument like event dot end argument and date time format this code will generate end date time and store into end variable below this we have defined title variable is equal to event.title this code will fetch title value of particular event and store in title variable after this we have defined id variable is equal to event dot id this method will get value of id of particular event when we have resize and store into id variable now we have start writing ajax request so under this first we have write url option and here we have write slash full calendar slash action so it will send request to action method of full calendar controller in second option we have write type option which has been set to post method here we have use post method for send data to server in third option we have write data and in this option we can define which data we want sent to server so here we have send title start end id and type variable with update as value data has been sent to server lastly we have write success callback function and under this function we want to refresh calendar data so here we have write calendar variable dot full calendar method and under this method we have write refetch events this code will reload data on calendar and after this we have write alert with event update message this message will pop up in browser after successfully update of event data in database now we have go to action method of full calendar controller and here we have write if statement and under condition we have write dollar request with type variable value is equal to update if this condition true then it will execute if block of code under this block of code we have write dollar event variable is equal to event class with find method and under this method we have write dollar request id variable this method will find model by its primary key next we have write update method this method will update records in the database under this method we have to define data in array format so in first key we have write table column name title and in value we have write dollar request variable with title object in second key we have write table column name start and in value we have write dollar request variable with start object value in third key we have write table column name end and in value we have write dollar request variable with end object value so here we have defined event data and this update method will update data in database after this for send request to ajax here we have write return statement with response method with json method and under this we have write dollar event variable so it will send data to ajax request in json format so here our update event code is ready so now we have check output in browser friends here we can see in 10 march cell it display 12 amp time but now we want to set time 1 pm to 3 pm so we have click on day button and go to 10 march page so here we have simply resize event to 1 to 3 by simply resize this blue color here after reset time now we have refresh page and here in 10 merge cell we can see time has been changed to 1 pm same way we can also change event data by simply drag and drop but it will not change data in database so for change in database also we have go to view file and here we have write event drop method with callback function with event object this method will triggered ajax request when we have stop drag event from one cell to another for write code for this event we have simply copy this code from this event resize and paste into event drop so on both event we want to update data so on both event same code will be triggered for update data in database so here our code is ready now check in browser friends here we want to change date of event from 10 march to 30 march so we have simply drag event from 10 to 30 and after this we have refresh page so now we can see event data has been under 30 march not in 10 so this way also we can change date of event by simply drag and drop now we want to remove some event from calendar so for this we have go to view file and here we have write event click method with callback function with event object this method will execute ajax request when we have click on any event so under this first we have write if statement and under condition we have write confirm pop up with message like are you sure you want to remove it so when we have click on any event then pop message with appear on web page with ok and cancel button so suppose we have click on ok button then it will execute if block of code under this block first we have create id variable is equal to event dot id it will fetch event id data from event on which we have click and store into id variable now we have start writing ajax request so under this first we have write url option and here we have write full calendar slash action so it will send request to action method of full calendar controller in second option we have write type in this post option we have use post method for send data to server in third option we have write data in this option we can define which data we want send to server so here we have define id variable and type variable with delete as value has been sent to server lastly we have write success callback function and under this function we want to refresh calendar data so we have write calendar variable dot full calendar method and under this method we have write refetch events this method will reload data on calendar and after this we have write alert with event deleted successfully message this text will pop up in browser now we have go to action method of full calendar controller so here we have write if statement and under condition we have write dollar request variable with type object value is equal to delete if this condition true then it will execute if block of code under this block we have write dollar event variable is equal to event class with find method and under this method we have write dollar request variable with id object this method will find a model by its primary key after this we have write delete method this method will delete records from database and then after we want to send data to ajax request so here we have write written statement with response method with json method and under this we have write dollar event variable this code will send data to ajax request in json format so here our remove event code is ready now we have check output in browser friends here now we want to removed event from 30 march cell so when we have click on sell then it has asked for add new event on this date but we want to remove event so now we have click on event after click on event it has asked us to confirm that we want to really removed it so we have click on ok button after clicking on ok button event has been removed from web page so this way we can removed event so in this tutorial we have discussed how can we use full calendar javascript plugin with laravel 8 framework and here we have discuss how to initialize full calendar plugin how can we load data on calendar from database by ajax in laravel 8 framework same way we have learned how can we add new event by using select method with ajax in laravel for insert new event and then after we have learned how to update event by using event resize and event drop method of this plugin with ajax in laravel framework and lastly we have seen how to remove event from calendar by using event click method in laravel using ajax so this way we have performed crud operation with full calendar plugin using ajax with laravel framework and my sql database lastly if you have any query or inputs regarding this tutorial you can ask your query in comment box if you have liked this video please share with your friends or even you can also share on social media also and lastly don't forget to subscribe our channel for future video tutorial i hope you have understand this tutorial and thank you watching this video tutorial bye we will be meet in next video tutorial bye

Channel: Webslesson

Views: 17,510

Keywords: fullcalendar, laravel 8 fullcalendar example, full calendar laravel, laravel 8 fullcalendar tutorial, fullcalendar laravel, laravel 8 implement fullcalendar, fullcalendar laravel 8, laravel 8 fullcalendar crud, fullcalendar laravel tutorial, laravel 8 fullcalendar ajax, laravel fullcalendar, laravel 8 fullcalendar events, jquery fullcalendar laravel, laravel 8 fullcalendar ajax example, laravel fullcalendar tutorial, laravel full calendar, laravel 8, fullcalendar example

Id: pubt0aXxSs4

Length: 36min 50sec (2210 seconds)

Published: Sun Mar 07 2021