中條 美冬

1649979180

FullCalendar | フルカレンダーをLaravelに統合する方法

FullCalendarは、軽量でありながら強力で開発者に優しいJavaScriptライブラリであり、最新のWebアプリで柔軟でドラッグ可能なイベントカレンダーを作成します。FullCalendarはv4以降Vanilla(ES6)JavaScriptとして機能するようになり、依存関係としてjQueryとmomentが削除されることに注意してください。

このチュートリアルでは、フルカレンダーをlaravel8アプリに統合する方法を完全にガイドします。また、laravel 8アプリのfullcalendarでイベントを作成、編集、更新、削除する方法も同様です。

Laravelアプリをインストールする

まず、ターミナルを開き、ターミナルで次のコマンドを実行して、Laravel8アプリをインストールまたはダウンロードします。

composer create-project --prefer-dist laravel/laravel blog

アプリをデータベースに接続する

この手順では、.envを開き、アプリをデータベースに接続するためのデータベースの詳細を構成します。

 DB_CONNECTION=mysql 
 DB_HOST=127.0.0.1 
 DB_PORT=3306 
 DB_DATABASE=here your database name here
 DB_USERNAME=here database username here
 DB_PASSWORD=here database password here

移行とモデルの構築

この手順では、ターミナルで次のコマンドを実行して、イベントモデルと移行ファイルを作成します。

php artisan make:model Event -m

このコマンドは、1つのモデル名Eventを作成し、Eventsテーブル用に1つの移行ファイルも作成します。

コマンドを正常に実行した後、database / migrationsフォルダーに移動し、 create_events_table.phpファイルを開きます。次に、次のコードを次のようにcreate_events_table.phpファイルに更新します。

<?php
 
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
 
class CreateEventsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('events', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->dateTime('start');
            $table->dateTime('end');
            $table->timestamps();
        });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('events');
    }
}

次に、ターミナルで次のコマンドを実行して、テーブルをデータベースに作成します。

php artisan migrate

ルートを追加する

このステップでは、2つのルートを作成し、web.phpファイルを追加します。したがって、/ routersディレクトリにアクセスして、web.phpファイルを開きます。次に、次のルートを追加します。

use App\Http\Controllers\FullCalendarController;
 
 
Route::get('ckeditor', [FullCalendarController::class, 'index']);
Route::post('fullcalendar/create', [FullCalendarController::class, 'create']);
Route::post('fullcalendar/update', [FullCalendarController::class, 'update']);
Route::post('fullcalendar/delete', [FullCalendarController::class, 'destroy']);

Artisanコマンドを使用してコントローラーを作成する

この手順では、ターミナルで次のコマンドを実行して、コントローラー名FullCalendarController.phpファイルを作成します。

php artisan make:controller FullCalendarController

コントローラが正常に作成されたら、app / http / controllersディレクトリにアクセスし、FullCalendarController.phpファイルを開きます。

<?php
   
namespace App\Http\Controllers;
   
use App\Models\Event;
use Illuminate\Http\Request;
use Redirect,Response;
   
class FullCalenderController extends Controller
{
 
    public function index()
    {
        if(request()->ajax()) 
        {
 
         $start = (!empty($_GET["start"])) ? ($_GET["start"]) : ('');
         $end = (!empty($_GET["end"])) ? ($_GET["end"]) : ('');
 
         $data = Event::whereDate('start', '>=', $start)->whereDate('end',   '<=', $end)->get(['id','title','start', 'end']);
         return Response::json($data);
        }
        return view('fullcalendar');
    }
    
   
    public function create(Request $request)
    {  
        $insertArr = [ 'title' => $request->title,
                       'start' => $request->start,
                       'end' => $request->end
                    ];
        $event = Event::insert($insertArr);   
        return Response::json($event);
    }
     
 
    public function update(Request $request)
    {   
        $where = array('id' => $request->id);
        $updateArr = ['title' => $request->title,'start' => $request->start, 'end' => $request->end];
        $event  = Event::where($where)->update($updateArr);
 
        return Response::json($event);
    } 
 
 
    public function destroy(Request $request)
    {
        $event = Event::where('id',$request->id)->delete();
   
        return Response::json($event);
    }    
 
 
}

ブレードビューを作成する

このステップでは、resources / viewsディレクトリにアクセスし、fullcalendar.blade.phpという名前のブレードビューファイルを作成します。そして、それに次のコードを追加します。

<!DOCTYPE html>
<html>
<head>
  <title>Laravel Fullcalender Add/Update/Delete Event Example Tutorial - Tutsmake.com</title>
  <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@3.9.0/dist/fullcalendar.min.css" />
 
<script src="https://cdn.jsdelivr.net/npm/moment@2.27.0/moment.min.js"></script>
 
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@3.9.0/dist/fullcalendar.min.js"></script>
<body>
 
  <div class="container">
      <div class="response"></div>
      <div id='calendar'></div>  
  </div>
 
 
</body>
</html>

bodyタグを閉じた後、スクリプトをfullcalendar.blade.phpに配置します

<script>
$(document).ready(function () {
var SITEURL = "{{url('/')}}";
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var calendar = $('#calendar').fullCalendar({
editable: true,
events: SITEURL + "fullcalendar",
displayEventTime: true,
editable: true,
eventRender: function (event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
select: function (start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: SITEURL + "fullcalendar/create",
data: 'title=' + title + '&start=' + start + '&end=' + end,
type: "POST",
success: function (data) {
displayMessage("Added Successfully");
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true
);
}
calendar.fullCalendar('unselect');
},
eventDrop: function (event, delta) {
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: SITEURL + 'fullcalendar/update',
data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
type: "POST",
success: function (response) {
displayMessage("Updated Successfully");
}
});
},
eventClick: function (event) {
var deleteMsg = confirm("Do you really want to delete?");
if (deleteMsg) {
$.ajax({
type: "POST",
url: SITEURL + 'fullcalendar/delete',
data: "&id=" + event.id,
success: function (response) {
if(parseInt(response) > 0) {
$('#calendar').fullCalendar('removeEvents', event.id);
displayMessage("Deleted Successfully");
}
}
});
}
}
});
});
function displayMessage(message) {
$(".response").html("<div class='success'>"+message+"</div>");
setInterval(function() { $(".success").fadeOut(); }, 1000);
}
</script>

開発サーバーを実行する

この手順では、ターミナルで次のコマンドを実行して、開発サーバーを起動します。

 php artisan serve
 If you want to run the project diffrent port so use this below command 
 php artisan serve --port=8080  

このアプリをテストする

次に、ブラウザを開いて、次のURLを押します。

http://localhost:8000/fullcalendar

What is GEEK

Buddha Community

Fullcalendar with Vuejs

This video goes through how to use Fullcalendar with Vuejs, Fullcalendar has been around for quite some time, and we can all (almost) agree that it’s the best calendar plugin out there, specially since they got rid of that jQuery dependecy, but to be honest using with Vue is not the easiest thing to do, especially if you’ve never used to plugin before, and that’s why this video exists, to show Hot to install Fullcalendar in Vue and how to add some plugins to it and customize it, along with other stuff.

Repo: https://github.com/konshensx16/vue-fullcalendar

#vuejs #fullcalendar

Ajay Malhotra

Ajay Malhotra

1590660728

Implement Fullcalendar in Angular 8

#angular8 #angular #angular9 #fullcalendar

John Smith

1615180915

How to Use Fullcalendar in Laravel 8

In this video tutorial, You can find how you can integrate a fullcalendar in laravel 8 application with Ajax. This process we have describe step by step instruction of laravel 8 FullCalendar ajax example. This Video tutorial will give you fullcalendar tutorial in laravel 8 application. You can learn adding the process of fullcalendar in Laravel 8 using Ajax. Under this video description you can find one blog link in which you can get complete source code of this video tutorial with step by step process.

https://youtu.be/pubt0aXxSs4

#laravel #fullcalendar

Autumn  Blick

Autumn Blick

1593162540

Angular 9 - how to show dynamic events in fullcalendar?

1. Here are the some basic commands to download fresh Angular 9 setup, fullcalendar and jquery on your local machine:

$ npm install -g @angular/cli       //Setup Angular9 atmosphere

$ ng new angularlatest9            //Install New Angular App
/**You need to update your Nodejs also for this verison**/
$ cd angularlatest9               //Go inside the Angular 8 Project
$ npm install jquery –save       //Add jquery module
$ npm i fullcalendar             //Add fullcalendar module
$ npm i moment                  //Add momentjs library
$ ng serve                     //Run your Angular 8 Project

2. Here is the code, you need to add into your angular.json file in root folder for including fullcalendar and jquery libraries:

...
"styles": [
              "src/styles.css",
              "node_modules/fullcalendar/dist/fullcalendar.min.css"
            ],
            "scripts": ["node_modules/jquery/dist/jquery.min.js",
            "node_modules/moment/min/moment.min.js",
            "node_modules/fullcalendar/dist/fullcalendar.min.js"]
...

3. Here is the code, you need to add into your src/app/app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
//HttP for Rest API's
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

#angular 8 #angular 9 #angular7 #fullcalendar