Create Event Calender In Laravel

In this tutorial we will learn the implementation of Full Calender (Javascript Event Calender) in Laravel.If we want to show our events,tasks & schedules along with the start time and end time then we have to use 'fullcalender jquery plugin' in our Laravel Application.

Don't Worry it's very easy to implement.Just follow the given steps and you will get through that.

1. I suppose the Laravel Project is installed on your system.If not then run the below command on your computer and get a fresh laravel 5.5 application structure.
   
   composer create-project --prefer-dist laravel/laravel blog
   
   
2. Now you need to install the fullcalender package.To install it fire the below command on your command line(cmd).
   
   composer require maddhatter/laravel-fullcalendar
   
   
3. Once you have installed the package, you need to add it to the service providers and alias.Go to config/app.php and the providers and aliase.All the new package that are installed has to be added in the providers and aliases as well.
   

   'providers' => [
   MaddHatter\LaravelFullcalendar\ServiceProvider::class,
   ],
   'aliases' => [
   'Calendar' => MaddHatter\LaravelFullcalendar\Facades\Calendar::class,
   ]

4. Create Events Table
   You can create the table manually also.Here I am creating the table by the use o migrations.Create migration of events table using artisan command.So hit the below command on cmd.
   
   php artisan make:migration create_events_table
   
   Firing the above command will create a migration file inside database/migrations, Now open the migration file and paste the below code in it.
   

   <?php
   use Illuminate\Support\Facades\Schema;
   use Illuminate\Database\Schema\Blueprint;
   use Illuminate\Database\Migrations\Migration;
   class CreateEventsTable extends Migration
   {
      public function up()
      {
         Schema::create('events', function (Blueprint $table) {
         $table->increments('id');
         $table->string('title');
         $table->date('start_date');
         $table->date('end_date');
         $table->timestamps();
      });
   }

   As soon as you have created the schema in your migration file.Run the below command in cmd in order to migrate the schema into database.
   
   php artisan migrate
   
   
5. Now as soon as you have migrated the table into the database,here comes the vital activity of craeting model for "events" table.So just fire the below command and create a new model.
   
   php artisan make:model Event
   
   
6. As soon as you will run above command,an event.php file will be created in app/event.php.
   
   Place the fields in the $fillable variable in array format.
   

   <?php
   namespace App;
   use Illuminate\Database\Eloquent\Model;
   class Event extends Model
   {
      protected $fillable = ['title','start_date','end_date'];
   }

7. Now we will create new seeder for dummy records so that we can fill all the events in the calender
   
   php artisan make:seeder AddDummyEvent
   
   After running above command, you will find a seeder file in your seeds folder in the path database/seeds/AddDummyEvent.php, Write the above code in your seeder file created(i.e, in AddDummyEvent.php ) file.
   

   <?php
   use Illuminate\Database\Seeder;
   use App\Event;
   class AddDummyEvent extends Seeder
   {
      /**
      * Run the database seeds.
      ** @return void
      */
      public function run()
         {
         $data = [
         ['title'=>'Rom Event', 'start_date'=>'2017-05-10', 'end_date'=>'2017-05-15'],
         ['title'=>'Coyala Event', 'start_date'=>'2017-05-11', 'end_date'=>'2017-05-16'],
         ['title'=>'Lara Event', 'start_date'=>'2017-05-16', 'end_date'=>'2017-05-22'],
         ];
      foreach ($data as $key => $value) {
            Event::create($value);
         }
      }
   }

8. Now you run the above seeder by firing the below command
   
   php artisan db:seed --class=AddDummyEvent
   
   
9. Now to display full calender, we need to add a new route "events" in our route file (i.e, web.php) file.
   
   Route::get('events', 'EventController@index');
   
   By adding the above line we can create route.
   
   
10. Now comes the role of controller where we will be writing a method to show calender as well as the events also.Here I have created a controller named EventController.
    

    <?php
    namespace App\Http\Controllers;
    use Illuminate\Http\Request;
    use Calendar;
    use App\Event;
    class EventController extends Controller
       {
       public function index()
          {
             $events = [];
             $data = Event::all();
             if($data->count()){
             foreach ($data as $key => $value) {
             $events[] = Calendar::event(
             $value->title,
             true,
             new \DateTime($value->start_date),
             new \DateTime($value->end_date.' +1 day')
          );
       }
    }
    $calendar = Calendar::addEvents($events);
       return view('mycalender', compact('calendar'));
       }
    }

11. Now as you have created controller, now let us create a view of calender (name it as mycalender.blade.php)
    
    Kindly paste the below code in your newly created blade file (i.e view).
    

    <!doctype html>
    <html lang="en">
    
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css" /> </head>
    
    <body>
        <div class="container">
            <div class="panel panel-primary">
                <div class="panel-heading"> MY Calender </div>
                <div class="panel-body"> {!! $calendar->calendar() !!} {!! $calendar->script() !!} </div>
            </div>
        </div>
    </body>
    
    </html>

12. Above we have created views, controller and route files for displaying calender and its events.Now let us view the result on localhost:8000/events.
    
    Note
    Before running the url on the browser,you need to initiate the program by running below command on cmd.
    
    php artisan serve
    
    
    Fig: The Final View of Calender with events showing from database.