Webアプリでスケジューラ活用No.81
Webixというライブラリを使ったアプリの開発事例を紹介していますが、スケジューラ機能も有料ライセンスを購入すれば、利用できます。
いろいろな機能が実装されていて、本格的に使うには有効なコンポーネントですが、年間使用料が毎年必要になることから、小規模なプロジェクトでの採用は、検討が必要です。
$963/年だけ最低でも費用がかかります。
今回は、このスケジューラコンポーネントではなく、オープンソースで無料で使えるFullCalendarというライブラリをWebixに組み込んで使う事例紹介です。
以下のようなカレンダーにイベント情報を追記して利用できます。
イベントは、対象日の開始時刻と終了時刻を指定するイベントと、期間を指定して終日イベントの2種類が利用できます。
以下のURLでFullCalendarは公開されていますので、詳しいことはそちらで確認してください。日本語表現なども可能なライブラリです。
今回は、該当カレンダーをwebix画面に描画する方法と、カレンダにイベントの追加や、イベント情報などクリックして、詳細情報を表示する機能だけのサンプル紹介です。
実際には、個人や、グループや会社のイベントを条件によって表示するような操作を実装すれば、いろいろな業務で利用できます。
表示可能な画面サイズによって、デザインもダイナミックに変更できるので、利用範囲は広いです。
Webixライブラリで扱う方法にもいろいろありますが、今回は、templateコンポーネント内に表示する方法を採用しました。
以下のURLで実際に表示される画面も確認できます。
実際に記述したソースです。（上記の画面デモとは別ですが）
<?php
//======================================================================
//File Name : ZTEST_sh_test.php
//Encoding : UTF-8
//Creation Date : 2025-02-05
//
//Copyright © 2025 yamasanfarm. All rights reserved.
//
//This source code or any portion thereof must not be
//reproduced or used in any manner whatsoever.
//======================================================================
//https://sunsun.sakura.ne.jp/webix02/view/ZTEST/ZTEST_sh_test.php?userid=admin
$TITLE_INFO ="ZTEST_sh_test";
$VER_INFO ="V01L01";
$JOB_INFO = "ZTEST";
$myfilename = basename(__FILE__); //自分自身のファイル名取得
$document_route = substr($_SERVER['DOCUMENT_ROOT'],0,-1);
$my_folder = getcwd();
$my_folder = str_replace($document_route, '' , $my_folder);
$pos1 = strpos($my_folder, '/view');
$pos2 = strpos($my_folder, '/rest_api');
if($pos1) $sub_folder = substr($my_folder,0,$pos1); //viewがあればカット
else if($pos2) $sub_folder = substr($my_folder,0,$pos2);
else $sub_folder = $my_folder; //viewがなければ、my_folder
define('WEBIX_FOLDER',"webix_GPL_1100"); //webixライブラリのフォルダ名
define('SUB_FOLDER',$sub_folder); //サブフォルダを指定したURL
define('ROOT_PATH',$document_route.$sub_folder); //ソースを保存しているパス
$userid = '';
$logheader = 'userid='.$userid.', '.$myfilename.':';//ログ出力時のヘッダー情報（自ファイル名,ログインIDを付与）
if($_SERVER["REQUEST_METHOD"] != "GET"){
//GET以外ははじく
error_log($logheader.' REQUEST_METHOD no GET');
header("HTTP/1.0 404 Not Found");
return;
}
$error_flag = -1;
$mypermission = 0;
$userid = 'ZTlesson';
$logheader = 'userid='.$userid.', '.$myfilename.':';//ログ出力時のヘッダー情報（自ファイル名,ログインIDを付与）
include('../../commonlib/svr_common_lib_v2.php'); //
$config_obj = get_config_obj();
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title><?php echo $TITLE_INFO.' '.$JOB_INFO.' ('.$VER_INFO.')' ?></title>
<script src="/webix_GPL_1020/webix.js" type="text/javascript" charset="utf-8"></script>
<link href="/webix_GPL_1020/skins/compact.css?<?php echo date('Ymd-H'); ?>" rel="stylesheet" type="text/css">
<link href="<?php echo SUB_FOLDER; ?>/commonlib/webix_custom_css.css?<?php echo date('Ymd-Hi'); ?>" rel="stylesheet" type="text/css">
<link rel="icon" href="<?php echo SUB_FOLDER; ?>/image/webix_64.ico">
<script src="<?php echo SUB_FOLDER; ?>/commonlib/object-assign.js"></script>
<script src="<?php echo SUB_FOLDER; ?>/commonlib/moment-with-locales.js"></script>
<script src="<?php echo SUB_FOLDER; ?>/commonlib/webix_common_lib.js"></script>
<link rel="stylesheet" href="/webix_GPL_1020/css/materialdesignicons.min.css" type="text/css" charset="utf-8">
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>
<style>
.blue .webix_el_box{
color: #0000ff;
}
.blue .webix_control.webix_el_text{
color: #0000ff;
}
.red .webix_el_box{
color: #ff0000;
}
.red .webix_control.webix_el_text{
color: #ff0000;
}
.invalid_mess{font-size:8px}
.red .webix_control.webix_el_text{
color: #ff0000;
}
.gray_bgcolor {
background: #efefef;
}
.teal_bgcolor .webix_button {
background-color: #008080;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="calendar"></div>
<script type="text/javascript" charset="utf-8">
webix.i18n.setLocale("ja-JP");
<?php
include('../../commonlib/CM0010_goto_menu_action.php');
include('../../commonlib/CM0030_sendprm_set_request.php'); //送信パラメータ準備関数(in:session_info,access_key out:send_prm)
include_once('../../commonlib/CM0080_screen_control.php');
?>
var init_events_lists = [
{ title: '朝会', start: '2025-02-10T09:00:00', end: '2025-02-10T09:30:00',id:100 ,type:"hour"},
{ title: '夕会', start: '2025-02-10T16:00:00', end: '2025-02-10T16:45:00',id:101 ,type:"hour"},
{ title: '出張', start: '2025-02-15', end: '2025-02-17',id:102 ,type:"date"}
];
function get_time_info(id){
var time_info = [];
for (let i = 0; i < init_events_lists.length; i++) {
if(init_events_lists[i]["id"] == id){
time_info["start"] = init_events_lists[i]["start"];
time_info["end"] = init_events_lists[i]["end"];
time_info["type"] = init_events_lists[i]["type"];
break;
}
}
return time_info;
}
webix.ui.fullScreen();
var form = webix.ui({
view:"form",
elements:[
{ view: "template", content: "calendar",id:"calendar",maxHeight:980},
{cols:[
{ view:"button", value:"イベント追加", css:"webix_primary" ,width:200,
click:function(){
var new_event_info = {
title: 'newイベント',
start: '2025-02-20',
end: '2025-02-20',
id:300,
type:"date"
};
init_events_lists.push(new_event_info);
calendar.addEvent(new_event_info);
}
},
{ view:"button", value:"閉じる" ,width:200,}
]}
]
});
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'ja', // 日本語化
initialView: 'dayGridMonth', // 月表示
initialDate: '2025-02-01', // 2025年2月を初期表示
contentHeight: 600,
events: init_events_lists,
dateClick: (e)=>{// 日付マスのクリックイベント
webix.alert("日付がクリックされました。<br>"+ e.dateStr);
},
eventClick: (e)=>{// イベントのクリックイベント
var time_info = get_time_info(e.event._def.publicId);
if(time_info.type == "hour"){
webix.alert("イベントが<br>クリックされました。<br>"+ e.event.title+"<br>id="+e.event._def.publicId+
"<br>start:"+moment(time_info.start).format("YYYY/MM/DD HH:mm")+"<br>end="+moment(time_info.end).format("YYYY/MM/DD HH:mm"));
}
else{
webix.alert("終日イベントが<br>クリックされました。<br>"+ e.event.title+"<br>id="+e.event._def.publicId+
"<br>start:"+moment(time_info.start).format("YYYY/MM/DD")+"<br>end="+moment(time_info.end).format("YYYY/MM/DD"));
}
}
});
calendar.render();
//calendar.updateSize();
</script>
</body>
</html>イベントをダイナミックに追加する動作を検証するためのボタンとイベントをクリックして、情報を取り出す操作(イベントと日付の2種類のイベント）を実装しました。
追加やクリックで情報が取り出せるので、さまざまな業務に応用が可能です。スマホ画面でも使えますが、少し、画面サイズの考慮は必要です。
以下は、2月10日の9時のイベント情報をクリックして情報を画面に表示した例です。
終日イベントのときは、時刻情報の表示をしないように実装しています。
開始日と終了日が別の日となっています。
ダイナミックにイベントを表示できるので、フィルタ条件などを指定して必要な情報だけ画面に表示する操作も実現できそうです。
これだけの機能を無料で使えるのはいいですね。
具体的な業務への実装もやっていこうと思います。