dhtmlx/scheduler

週の初めは「日曜日」にする

scheduler.config.start_on_monday = false;

日本語化

index.htmlに

<script src="codebase/locale/locale_jp.js" type="text/javascript"></script>

を追加すればOK
2017y05m06d_232222054.png
だが、、「5月2017」ではなく、「2017.05」とかであってほしい。。
あと週表示とか日表示にすると、、
2017y05m06d_234138630.png
とか
2017y05m06d_234142477.png
と微妙に残念な感じ。っで、これを補正するには下記をindex.htmlに加える。

scheduler.config.month_date = "%Y.%m";
scheduler.config.default_date = "%Y.%m.%d";
scheduler.config.day_date = "%M %j日 (%D)";

すれば、
2017y05m06d_235530652.png
2017y05m06d_235535292.png
2017y05m06d_235538620.png
と変更されます

「月表示」でイベント登録時の画面を修正したい

既定だと書きのようなダイアログが表示される
2017y05m07d_000027302.png
まず、ダイアログの

デスクリプショ
      ン

だが、cssの修正でカバー可能。大本のcssを修正せずとも、index.htmlに大本のcssを上書きさせるように追記する

        .dhx_cal_light_wide .dhx_cal_lsection, .dhx_cal_light_wide .dhx_cal_lsection .dhx_fullday {
                font-size: 11px;
        }

これで改行されず綺麗になる *ブラウザのフォントを修正すればいいのかもしれないが
期間の表記も変更可能である。既定は

scheduler.config.lightbox.sections=[
    {name:"description", height:200, map_to:"text", type:"textarea" , focus:true},
    {name:"time", height:72, type:"time", map_to:"auto", time_format:["%Y", "%m","%d", "%H:%i"]}
]

とされていて、期間の表記は「time_format:["%Y", "%m", "%d", "%H:%i"]」で定義できる。
っで、これを調整して読みやすいフォーマットにする

time_format:["%Y", "%m","%d", "%H:%i"]

なら、下図の様になる
2017y05m07d_170615396.png

留意上記パラメターの「%Y」、「%m」、「%d」「%H:%i」以外を使用すると正しく表記されなくなる

イベントの時間刻み

デフォルトでは5分毎で開始時間、終了時間を定義されるが、それを10分刻み、15分刻みにするとかか可能

scheduler.config.time_step = 15;

現時刻のラインを引く

ライブラリを追加する必要があります

<script src="codebase/ext/dhtmlxscheduler_limit.js" type="text/javascript"></script>

そして

scheduler.config.mark_now = true;

を入れる。

時間軸の上限、下限を設ける

scheduler.config.first_hour = 8;
scheduler.config.last_hour = 21;

これで下記のようになる
2017y05m07d_154545412.png

「日表示」「週表示」でもイベント登録画面を表示する

「日表示」「週表示」選択した時間帯へコメントは記載できるが、後述する他の記載事項までは記載できない
2017y05m07d_175736648.png
そこで、「日表示」「週表示」で時間帯を選択するとイベント画面が表示させるようにするには下記を追加する

scheduler.config.details_on_dblclick = true;
scheduler.config.details_on_create=true;

「直行」「直帰」「帰社」のフラグを儲ける

index.htmlを下記のように修正して「直行(straight)」、「終了後行動(back2office)」の項目を用意する

scheduler.locale.labels.section_straight = "直行";
scheduler.locale.labels.section_back2office = "終了後行動";
scheduler.config.lightbox.sections=[
  {name:"description", height:50, map_to:"text", type:"textarea" , focus:true},
  {name:"straight", height:20, map_to:"straight", type:"checkbox", checked_value:"1", unchecked_value:"0"},
  {name:"back2office", height:20, map_to:"back2office", type:"radio", vertical:false, 
                                        options:[{key:1,label:"帰社(社内)"},{key:2,label:"直帰"}]},
  {name:"time", height:72, type:"time", map_to:"auto", time_format:["%Y","%m","%d","%H:%i"]}
]

events.phpに新規フィールドとなる「straight」と「back2office」を儲けて

$calendar->render_table("events","id","start_date,end_date,text,straight,back2office");

最後に、データを収めるデータベースに「直行(straight)」、「終了後行動(back2office)」のフィールドを用意する

[root@c ~]# mysql -u root -p -s -b -D schedulerDB
Enter password:
MariaDB [schedulerDB]> ALTER TABLE `events` ADD (`straight` TINYINT, `back2office` TINYINT);

*テーブル名、フィールド名はバッククオート(`)で囲んでます。恐らくブラウザ、ajax、php間で大文字小文字の揺るぎを許容しないために
これで完了
2017y05m07d_213124039.png

「直行」「直帰」「帰社」を週表示、日表示に表示する

index.htmlに下記を加える

scheduler.templates.event_text=function(start,end,event){
  var textbox="";
  if (event.straight) textbox = "直行";
  if (event.back2office == '1' ) {
      textbox += ",帰社(社内)";
  }else if (event.back2office == '2' ) {
      textbox += ",直帰";
  }
  return event.text + "<br>" + textbox;
};

このような表記になる
2017y05m08d_142755889.png

繰り返しイベント

毎週のミーティングとか登録する際に便利
まずは、index.htmlに追加のjavascriptを登録

<script src="codebase/ext/dhtmlxscheduler_recurring.js"></script>

そして下記を加えて

scheduler.config.repeat_date = "%Y/%m/%d"; //繰り返し予定の最終日の日付フォーマット
scheduler.config.include_end_by = true;    //繰り返しの最終日を含めるか、含めないか
scheduler.config.repeat_precise = true;    //毎週予定の登録の際、指定した初めのイベントが過去なら定義しない

「scheduler.config.lightbox.sections」を

scheduler.config.lightbox.sections=[
  {name:"description", height:50, map_to:"text", type:"textarea" , focus:true},
  {name:"straight", height:20, map_to:"straight", type:"checkbox", checked_value:"1", unchecked_value:"0"},
  {name:"back2office", height:20, map_to:"back2office", type:"radio", vertical:false, 
                                        options:[{key:1,label:"帰社(社内)"},{key:2,label:"直帰"}]},
  {name:"recurring", height:115, type:"recurring", map_to:"rec_type", button:"recurring"},
  {name:"time", height:72, type:"time", map_to:"auto", time_format:["%Y","%m","%d","%H:%i"]}
]

とする。「name:"recurring"」が追加された形です
データベースに繰り返しイベントの情報を掲載できるようにフィールドを追加します

[root@c ~]# mysql -u root -p -s -b -D schedulerDB
Enter password:
MariaDB [schedulerDB]> ALTER TABLE `events` ADD (`rec_type` VARCHAR(255), `event_length` BIGINT, `event_pid` INT);

ロジック部分であるevents.phpを修正します

$calendar->render_table("events","id","start_date,end_date,text,straight,back2office,rec_type,event_pid,event_length");

そうすると、イベント作成時に下図のようなフィールドがダイアログに組み込まれ、
2017y05m07d_231821198.png
この「無効」リンクを押下すると、繰り返しイベントの定義項目が表示される
2017y05m07d_232638046.png
この例では、毎週 月曜日 9:00-10:00 2017/06/06までの間を定義します。

日曜日と土曜日の背景色を付けたい(週表示)

index.htmlに下記CSSコードとjavascriptコードを追加します
CSS

.dhx_scale_holder_now.weekendsat, .dhx_scale_holder.weekendsat{
  background-image:url(codebase/imgs/week_sat_bg.png);
}
.dhx_scale_holder_now.weekendsun, .dhx_scale_holder.weekendsun{
  background-image:url(codebase/imgs/week_sun_bg.png);
}

Javascript

scheduler.templates.week_date_class=function(date,today){
  if (date.getDay()==6 ) return "weekendsat";
  if (date.getDay()==0 ) return "weekendsun";
  return "";
};

そして、土曜日用と日曜日用のイメージファイル(week_sat_bg.png、week_sun_bg.png)を用意します。
このイメージは、高さ44px横1pxのイメージで、一番下の43-44pixelは灰色、21-22pxに多少濃い色を配色します
下図は土曜日のイメージファイルの拡大です
2017y05m08d_010119547.png
これらイメージファイルを上記の場所にコピーすると下図のような表現になります。
2017y05m08d_010448700.png

注意
上記は「scheduler.config.hour_size_px」の値が既定の「42」だった場合です。この値を変更すれば、イメージファイルと時間軸(Y-軸)がずれます

*もう少しスマートな方法があるかもしれないけど、、、

***日曜日と土曜日の背景色を付けたい(月表示)

これもまたindex.htmlに下記CSSコードとjavascriptコードを追加します
CSS

/* 土曜日用 */
.saturday .dhx_month_body{ background-color: #ccebfd; }
.saturday .dhx_month_head{ background-color: #ccebfd; }
.dhx_before.saturday .dhx_month_head{ background-color: #def2fe; }
.dhx_before.saturday .dhx_month_body{ background-color: #def2fe; }
.dhx_after.saturday .dhx_month_head{ background-color: #def2fe; }
.dhx_after.saturday .dhx_month_body{ background-color: #def2fe; }
 
/* 日曜日用 */
.sunday .dhx_month_body{ background-color: #fff0f5; }
.sunday .dhx_month_head{ background-color: #fff0f5; }
.dhx_before.sunday .dhx_month_body{ background-color: #fff7fa; }
.dhx_before.sunday .dhx_month_head{ background-color: #fff7fa; }
.dhx_after.sunday .dhx_month_body{ background-color: #fff7fa; }
.dhx_after.sunday .dhx_month_head{ background-color: #fff7fa; }

Javascript

scheduler.templates.month_date_class = function(date){
  if (date.getDay()==6 ) return "saturday";
  if (date.getDay()==0 ) return "sunday";
  return "";
};

イメージ画像は用意する必要はなく、このままでOK
2017y05m08d_020914695.png

マウス操作でイベントを延長/短縮

index.htmlに

scheduler.config.resize_month_events = true;

を記載すると、月表示で複数日に渡るイベントをマウス操作で延長/短縮できます


トップ   編集 添付 複製 名前変更     ヘルプ   最終更新のRSS
Last-modified: 2017-05-08 (月) 14:41:34 (16d)