{"id":19124,"date":"2020-10-27T11:16:50","date_gmt":"2020-10-27T11:16:50","guid":{"rendered":"http:\/\/www.devopsschool.com\/blog\/?p=19124"},"modified":"2022-03-07T16:48:44","modified_gmt":"2022-03-07T16:48:44","slug":"how-to-create-an-event-calendar-in-laravel-part-2","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/how-to-create-an-event-calendar-in-laravel-part-2\/","title":{"rendered":"HOW TO CREATE  EVENT CALENDAR IN LARAVEL? PART-2"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\"><strong>Step 1.Create a Laravel Project<\/strong><\/h3>\n\n\n\n<p>Firstly, Create a new project in laravel, so we open Git Bash, &nbsp;Go to <strong>My Computer\/This PC&#8211;&gt;LocalDisk(C:)&#8211;&gt;Xampp&#8211;&gt;Htdocs<\/strong> (Press right click on Mouse)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"548\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.1-1024x548.jpg\" alt=\"\" class=\"wp-image-19125\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.1-1024x548.jpg 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.1-300x161.jpg 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.1-768x411.jpg 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.1.jpg 1365w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<script src=\"https:\/\/gist.github.com\/sumitidea\/68add8ddbf1c01d6fdbb4f6cf81b796e.js\"><\/script>\n\n\n\n<h5 class=\"wp-block-heading\">We write down the following command on Git Bash.<\/h5>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"724\" height=\"342\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.2.jpg\" alt=\"\" class=\"wp-image-19127\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.2.jpg 724w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.2-300x142.jpg 300w\" sizes=\"auto, (max-width: 724px) 100vw, 724px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"733\" height=\"365\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.3.jpg\" alt=\"\" class=\"wp-image-19128\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.3.jpg 733w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.3-300x149.jpg 300w\" sizes=\"auto, (max-width: 733px) 100vw, 733px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2. Now we move to the project directory on Git Bash, so write down the following command &#8211;&gt;<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"729\" height=\"335\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.4.jpg\" alt=\"\" class=\"wp-image-19129\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.4.jpg 729w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.4-300x138.jpg 300w\" sizes=\"auto, (max-width: 729px) 100vw, 729px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 3. Install Composer Package<\/strong><\/h3>\n\n\n\n<p>In this step, we have to download and install&nbsp;the <strong>Laravel-full calendar<\/strong>&nbsp;<strong>package <\/strong>for use to generate Event Calendar. So just run the following command to download and install the package.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">\n$ composer <span class=\"hljs-built_in\">require<\/span> maddhatter\/laravel-fullcalendar\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"737\" height=\"369\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.5.jpg\" alt=\"\" class=\"wp-image-19131\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.5.jpg 737w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.5-300x150.jpg 300w\" sizes=\"auto, (max-width: 737px) 100vw, 737px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 4. Open Project in Visual Studio<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"521\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.6-1024x521.jpg\" alt=\"\" class=\"wp-image-19132\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.6-1024x521.jpg 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.6-300x153.jpg 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.6-768x391.jpg 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.6.jpg 1365w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"574\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.7-1024x574.jpg\" alt=\"\" class=\"wp-image-19133\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.7-1024x574.jpg 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.7-300x168.jpg 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.7-768x431.jpg 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.7-740x414.jpg 740w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.7-355x199.jpg 355w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.7.jpg 1243w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 5. Application Configuration<\/strong><\/h3>\n\n\n\n<p>After successfully installed the package then we should update the application config details to use the package in our application. Here we need to add&nbsp;<strong>providers &amp; aliases<\/strong>&nbsp;array details with the following details<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/sumitidea\/98a22040dbec864305e52b744a1bfb88.js\"><\/script>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"537\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.8-1024x537.jpg\" alt=\"\" class=\"wp-image-19135\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.8-1024x537.jpg 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.8-300x157.jpg 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.8-768x403.jpg 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.8.jpg 1349w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.9-1024x640.jpg\" alt=\"\" class=\"wp-image-19136\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.9-1024x640.jpg 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.9-300x188.jpg 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.9-768x480.jpg 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/2.9.jpg 1147w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 5. Create Model, Controller, and Migration<\/strong><\/h3>\n\n\n\n<p>Here, we need to create a&nbsp;<strong>Model, Controller<\/strong>, and&nbsp;<strong>Migration<\/strong>&nbsp;for Events using Laravel&nbsp; composer <strong>artisan <\/strong>command, so first fire bellow command:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">php<\/span> <span class=\"hljs-selector-tag\">artisan<\/span> <span class=\"hljs-selector-tag\">make<\/span><span class=\"hljs-selector-pseudo\">:model<\/span> <span class=\"hljs-selector-tag\">Event<\/span> <span class=\"hljs-selector-tag\">-mc<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"723\" height=\"381\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/3.0.jpg\" alt=\"\" class=\"wp-image-19137\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/3.0.jpg 723w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/3.0-300x158.jpg 300w\" sizes=\"auto, (max-width: 723px) 100vw, 723px\" \/><\/figure>\n\n\n\n<p>Above command, help us to create&nbsp;<strong>Model, Controller,<\/strong>&nbsp;and&nbsp;<strong>Migration<\/strong>&nbsp;for Event master.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 6. &nbsp;In the migration table file.<\/h2>\n\n\n\n<p>We need to add the required no of <strong>columns <\/strong>details for the event table like <strong>title<\/strong>, <strong>color<\/strong>, <strong>start_date<\/strong>, and <strong>end_date<\/strong>, etc.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/sumitidea\/bb860fe4254d6417824a64aaea6b98e0.js\"><\/script>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"655\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/3.1-1024x655.jpg\" alt=\"\" class=\"wp-image-19138\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/3.1-1024x655.jpg 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/3.1-300x192.jpg 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/3.1-768x491.jpg 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/3.1.jpg 1059w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 7. We need to go and update the Event model file in our application like&nbsp;<strong>fillable, primary key, product,<\/strong>&nbsp;etc. <\/h3>\n\n\n\n<p>Event model files present at&nbsp;<strong>app\/Event.php<\/strong>&nbsp;path and just update with following details in it.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/sumitidea\/9bd57cfd09b1cf8c77b24602ceb5db69.js\"><\/script>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"949\" height=\"337\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/3.2.jpg\" alt=\"\" class=\"wp-image-19139\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/3.2.jpg 949w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/3.2-300x107.jpg 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/3.2-768x273.jpg 768w\" sizes=\"auto, (max-width: 949px) 100vw, 949px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 8. <strong>Routes Definition<\/strong><\/h3>\n\n\n\n<p>We want to add new routes for showing Event Calendar. So just go to routes\/web.php file and update the following routes to access data table operation in our application.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/sumitidea\/10b82a0303123a06288362f0199f5449.js\"><\/script>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"550\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/3.3-1024x550.jpg\" alt=\"\" class=\"wp-image-19140\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/3.3-1024x550.jpg 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/3.3-300x161.jpg 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/3.3-768x412.jpg 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/3.3.jpg 1157w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 9. Before migrate we Update database name&nbsp; in .env file&nbsp; (DB_DATABASE=eventcalendar)<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"613\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/3.4-1024x613.jpg\" alt=\"\" class=\"wp-image-19141\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/3.4-1024x613.jpg 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/3.4-300x180.jpg 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/3.4-768x460.jpg 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/3.4.jpg 1031w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 10. Open Xampp and start apache and Mysql and click admin to open phpMyAdmin database<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"665\" height=\"439\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/3.5.jpg\" alt=\"\" class=\"wp-image-19142\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/3.5.jpg 665w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/10\/3.5-300x198.jpg 300w\" sizes=\"auto, (max-width: 665px) 100vw, 665px\" \/><\/figure>\n\n\n\n<p><strong>In Part 3, we will see how to make a new controller for&nbsp;<strong>Event Calendar<\/strong>?<\/strong><\/p>\n\n\n\n<p><strong>Click<\/strong>\u00a0<strong>Here\u00a0<\/strong>&#8212;<a href=\"https:\/\/www.devopsschool.com\/blog\/how-to-create-event-calendar-in-laravel-part-3\/\">https:\/\/www.devopsschool.com\/blog\/how-to-create-event-calendar-in-laravel-part-3\/<\/a><\/p>\n\n\n<div class=\"epyt-gallery\" data-currpage=\"1\" id=\"epyt_gallery_92226\"><figure class=\"wp-block-embed wp-block-embed-youtube is-type-video is-provider-youtube epyt-figure\"><div class=\"wp-block-embed__wrapper\"><iframe loading=\"lazy\"  id=\"_ytid_12655\"  width=\"760\" height=\"427\"  data-origwidth=\"760\" data-origheight=\"427\" src=\"https:\/\/www.youtube.com\/embed\/?enablejsapi=1&#038;autoplay=0&#038;cc_load_policy=0&#038;cc_lang_pref=&#038;iv_load_policy=1&#038;loop=0&#038;rel=1&#038;fs=1&#038;playsinline=0&#038;autohide=2&#038;theme=dark&#038;color=red&#038;controls=1&#038;disablekb=0&#038;\" class=\"__youtube_prefs__  no-lazyload\" title=\"YouTube player\"  data-epytgalleryid=\"epyt_gallery_92226\"  allow=\"fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen data-no-lazy=\"1\" data-skipgform_ajax_framebjll=\"\"><\/iframe><\/div><\/figure><div class=\"epyt-gallery-list\"><div>Sorry, there was a YouTube error.<\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Step 1.Create a Laravel Project Firstly, Create a new project in laravel, so we open Git Bash, &nbsp;Go to My Computer\/This PC&#8211;&gt;LocalDisk(C:)&#8211;&gt;Xampp&#8211;&gt;Htdocs (Press right click on Mouse) We write down the following command on Git Bash. Step 2. Now we move to the project directory on Git Bash, so write down the following command &#8211;&gt;&#8230;<\/p>\n","protected":false},"author":1,"featured_media":19162,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_joinchat":[],"footnotes":""},"categories":[5201],"tags":[5596,6245,3415,5356],"class_list":["post-19124","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laravel","tag-composer","tag-git-bash","tag-visual-studio-2010","tag-xampp"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/19124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=19124"}],"version-history":[{"count":9,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/19124\/revisions"}],"predecessor-version":[{"id":24517,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/19124\/revisions\/24517"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media\/19162"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=19124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=19124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=19124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}