{"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_67806\"><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_77787\"  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_67806\"  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)&#8230; <\/p>\n","protected":false},"author":1,"featured_media":19162,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_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}]}}