LoginSignup
3
0
@mon_wadain株式会社メディアテック

【OutSystems】【Forge】FullCalendar ReactiveのAdvancedOptionsについて

Posted at

対象者

  • ローコード開発ツール「OutSystems」を使用されている方
  • OutSystemsでGoogleカレンダーやOutLookのようなものを実装したい方

前提

  • ForgeであるFullCalendar Reactiveを利用して実装しています。

Forge：FullCalendar Reactiveとは

  • OutSystemsでは、「Forge」という部品のようなものがあり、
    開発時間を大幅に短縮できる。FullCalendar Reactiveはその中のひとつ。

無題.png
image.png

基本操作

引数やStructureの使用方法などの基本操作は、demoアプリケーションを触ってみると分かりやすいかと思いますので、まずはこちらからダウンロードしてみましょう。
image.png

痒いところに手が届く「Advanced Options」

Advanced Optionsの使用例をご紹介します。
image.png

  • 日本語化
    • before（英語表記）
      image.png
    • after（日本語表記）
      image.png 
allDayText:'終日',
buttonText: {
   today: '今日',
   month: '月単位',
   week: '週単位',
   day: '日単位'
},
locale:ja
  • 初期表示を月単位から週単位にする
    • before（初期表示「月単位」）
      image.png
    • after（初期表示「週単位」）
      image.png 
InitialView:timeGridWeek
  • スケジュールの時間表記を消す
    • before（時間表記あり）
      image.png
    • after（時間表記なし）
      image.png 
displayEventTime: false
  • 業務時間以外を灰色にする
    • before（業務時間指定なし）
      image.png
    • after（業務時間指定あり）
      image.png 
businessHours: {
  daysOfWeek: [ 1, 2, 3, 4 ], // 1：月曜日～4：木曜日
  startTime: '10:00', // 開始時間
  endTime: '18:00', // 終了時間
}
  • 予定を重複して表示させないようにする
    • before（重複して表示）
      image.png
    • after（重複しないで表示）
      image.png 
slotEventOverlap:false

おわりに

  • 他にもこんな便利な設定あるよって方がいらっしゃれば、追記するのでコメントで教えてください！

参考文献

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
0