PHP における fullcalendar の利用方法

2年 ago
結衣, 春花
1 minute

FullCalendarはjQueryベースのイベント・タスクカレンダープラグインで、日、週、月間の3種類のビューでウェブサイトにイベントやタスクを表示できます。以下はPHPでのFullCalendarの基本的な使い方です。

  1. jQueryとFullCalendarライブラリーのファイルを読み込む

まず、PHPコードでjQueryとFullCalendarライブラリファイルを読み込みます。これを行うには、次の方法を使用できます。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js"></script>
  1. コンテナを作成する

FullCalendar コンポーネントのcalendar viewを表示するための、HTML 内にコンテナを作成する。

<div id="calendar"></div>
  1. FullCalendar を初期化する

JavaScriptでは、FullCalendarのfullCalendar()メソッドを使用し、カレンダーを初期化し、関連する設定項目を渡す。

$(document).ready(function() {
$('#calendar').fullCalendar({
// 配置项
});
});
  1. オプション

イベントソース、ビュー、日付フォーマットなどのさまざまな FullCalendar オプションを必要に応じて設定できます。以下に一般的な設定オプションの例をいくつか示します。

  1. 月表示に初期表示を切り替えます
defaultView: 'month'
  1. カレンダーの見出し部分のスタイル設定をする：
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}
  1. イベントソースを設定する：
events: '/path/to/events.php'

上のコード内にある /path/to/events.php は PHP のファイルパスで、イベントデータを取得するもので、必要に応じて変更してください。

  1. イベントデータを取得

PHPではイベントデータを取得するスクリプトファイルを新規作成する必要があります。イベントデータは、データベースクエリ、ファイル読み取りなどで取得することができ、取得したデータをJSON形式でFullCalendarに返します。PHPコードの例を次に示します。

<?php
// 获取事件数据的PHP脚本文件
// 获取事件数据的逻辑处理
// 将事件数据以JSON格式返回给FullCalendar
header('Content-Type: application/json');
echo json_encode($events);
?>

上記のコードにおける$eventsは、イベントデータを含む配列です。実際に使用する際は、ビジネスロジックに応じて適切なクエリと処理を行ってください。

上記はPHPでFullCalendarを使用する基本手順です。ニーズに応じて設定を調整し、PHPスクリプトで対応するイベントデータを取得できます。

bannerAds