DocJp2433: カレンダー機能 (フルカレンダー)

Title: カレンダー機能 (フルカレンダー)

最新の TeamPage 6.2 では、新しいカレンダー機能を利用できます。この新しいカレンダー機能は、「フルカレンダー (FullCalendar)」というプラグインによって実装されており、プラグイン設定画面でいろいろな設定ができます。

この記事では、この新カレンダーの機能や設定方法を説明します。

ダウンロード

当プラグインは、TeamPage のインストーラーに含まれており、通常はここからダウンロードしてインストールする必要はありません。

TeamPage をアップデートすると、通常は最新版の「フルカレンダー (FullCalendar)」にアップデートされます。

画面と機能

標準カレンダー

標準のカレンダー画面は次の場所で利用できます。

[すべてのスペース] > [カレンダー] タブ > [すべてのユーザー] サブタブ
スペース > [カレンダー] タブ > [すべてのユーザー] サブタブ
ユーザーのプロフィールページ > [カレンダー] タブ
プロジェクトの [カレンダー] タブ
マイルストーンの [カレンダー] タブ

グループ選択カレンダー (スケジュール調整)

[カレンダー] > [グループ選択] では、特定のグループに所属するユーザーのカレンダーが一覧表示されます。

選択できるグループは次のとおりです。

ユーザーグループプラグインで定義したグループ
スペースのメンバー
プロジェクトのオーナーとメンバー
自分がフォローしているユーザー
自分をフォローしているユーザー
すべてのユーザー

例えば、下図では「動作テスト」スペースを選択すると、「動作スペース」のスペースメンバーであるユーザーのカレンダーが表示され、それぞれが担当するタスクや参加する予定を確認・比較できます。

期間や表示形式の切り替え

画面左上のボタンで、カレンダーの期間（月、2週間、1週間、年など）や表示形式（テーブル型、アジェンダ型（縦方向に時刻を表示するタイプ）、リスト型）を選択できます。

どのボタンをどのような順序で並べるかは、各ユーザーが設定・変更できます。（後述）

テーブル型の例

アジェンダ型の例

リスト型の例

イベントの新規登録

カレンダーに新しいタスクや予定を登録するには、テーブル型画面でアイコンをクリックする方法、アジェンダ型画面で空白領域をクリックする方法、サイドバーの [新しい〜] メニューを使用する方法があります。

アイコンから新規登録する

テーブル型カレンダー画面でマウスカーソルを目的のセル（日にち）へ移動させると、セルの左上に新しい予定やタスクを登録するためのアイコンが表示されます。このアイコンをクリックすると、新規登録フォームが表示されます。

電話メモプラグインがインストールされている場合は、電話メモ登録用のアイコンも表示されます。

空白領域から新規登録する

アジェンダ型の画面の空白領域をクリックすると、新しい予定の作成フォームが表示されます。

※ 現行バージョンでは、タスクの新規登録はできません。

サイドバーのメニューから新規登録する

サイドバーの [新しい〜] から、予定、タスク、プロジェクト、マイルストーンの作成ができます。

イベントの変更（編集）

登録済みの予定やタスクなどを変更するには、ドラッグ＆ドロップする方法と、編集フォームで開いて変更→投稿する方法があります。

ドラッグ＆ドロップを使う

イベント全体やイベントの末尾（終了時刻）をドラッグ＆ドロップして変更できます。次のビデオ（動画）をご覧ください。

編集フォームを使う

イベントをクリックすると下図のような詳細ダイアログが表示されますので、[編集する] をクリックして編集フォームで開き、内容を変更後、[送信] します。

フィルター（絞り込み）

[フィルター] ドロップダウンリストから特定の要素でフィルター（絞り込み）ができます。下図は、「管理者ユーザーまたは佐野浩が参加する予定」だけを表示した例です。

休日・祝日

日本の祝日を表示するには、Google が公開している、「日本の祝日」Google カレンダー情報を登録すると便利です。Google カレンダーの情報を TeamPage のフルカレンダーに表示する方法については、後述の「Google カレンダー」を参照してください。

独自の休日・祝日を表示するには、日付と祝日・休日の名前（「●●記念日」など）を記述した記事を投稿します。

休日・祝日の登録

すべてのユーザーの読み取り権限のあるスペースに、次のような記事を投稿します。

記事本文に、1 行ごと（1 段落ごと）に、「年-月-日祝日の名前」の書式で休日・祝日を記述します。月や日は必ず 2 桁で記述します。1 桁の場合は前に「0」を付けます。

例: 2017-01-09 成人の日

また、半角パイプ記号で区切ってクラス名を追加することができます。次の例は、カレンダー上に表示されるアイテムに「japan」と「autumn」のクラス名を追加します。

例: 2021-10-21 秋の記念日 | japan,autumn

記事には、必ず識別用のタグを付けてください。既定のタグの書式は「holidays:西暦」です。この「holidays」の部分は、プラグイン設定で変更できます。（後述）

休日・祝日の表示

記事に登録した休日・祝日がカレンダーに表示されることを確認します。

休日・祝日は、既定で赤 (Crimson) で表示されますが、後述のプラグイン設定で変更できます。

プラグイン設定

設定画面の表示

サーバー管理者は、サーバーセットアップ > プラグイン > [フルカレンダー (FullCalendar)] の [設定] をクリックします。表示された設定画面で、カレンダー機能の基本設定と全ユーザーの既定の設定ができます。

各ユーザーは、パーソナルセットアップ > プラグイン > [フルカレンダー (FullCalendar)] の [設定] をクリックします。表示された設定画面で、自分用の設定ができます。

基本設定（ジャーナル設定）

ジャーナル設定では、切り替えボタンに表示される文字の変更と、各イベントに表示するタグの設定ができます。

切り替えボタンの表示文字

各ボタンに表示される文字を設定できます。

なお、どのボタンをどの順番で表示するかは後述のユーザー設定で行います。

タグ表示

予定やタスクに特定のタグが付いている場合、そのタグをタイトルに表示するか（挿入するか）どうかを設定します。

下図は、上図のように「予定に『緊急』タグが付いていたら表示」と「タスクに『緊急』または『コメント希望』が付いていたら表示」設定を行ったときの例です。それぞれのタイトルにタグ名が挿入されています。

休日・祝日の設定

「休日・祝日の定義記事」として識別するためのタグや、カレンダーに表示する休日・祝日の色を設定できます。

ユーザー設定

[すべてのユーザー] カレンダー

[選択可能なカレンダーの種類] 設定では、[カレンダー] > [すべてのユーザー] のカレンダーの、左上に表示されるボタンを選択できます。表示したいボタンを右側の [選択済み] 欄に移動させ、[適用] をクリックして変更を確定してください。

[グループ選択] カレンダー

[選択可能なカレンダーの種類] 設定では、[カレンダー] > [グループ選択] のカレンダーの、左上に表示されるボタンを選択できます。表示したいボタンを右側の [選択済み] 欄に移動させ、[適用] をクリックして変更を確定してください。

[自分のカレンダーを最初に表示] では、自分のカレンダーが含まれる場合に、他のユーザーのカレンダーより先に（画面の上に）自分のカレンダーを表示するかどうかを選択します。

[既定のグループ] で選択されたグループが既定で選択されます。ただし、スペースやプロジェクトなどから同画面が呼び出された場合を除きます。

Google カレンダー

Google カレンダー上のイベントを表示するための設定を行います。

Google カレンダー上のイベントを表示するには、API キーの取得、Google カレンダーの公開、Google カレンダー ID の取得が必要です。

Google カレンダー API キーの取得

ブラウザーで Google の API サービスのページを開き、検索ボックスに「Calendar」と入力して [Google Calendar API] を見付け、クリックします。

新しいプロジェクトを作成します。[プロジェクトを作成] をクリック。

適当な名前をつけてプロジェクトを作成します。

[Google Calendar API] の [有効にする] をクリックします。

サイドバーの [認証情報] を選択し、[認証情報を作成] ドロップダウンから [API キー] を選択します。

作成された API キーをコピーします。

API キーの詳細画面を表示し、必要に応じて利用制限を加えます。よくわからない場合は設定変更せず、そのままで構いません。後でいつでも変更できます。

Google カレンダーの公開

Google カレンダーにアクセスし calendar.google.com/ サイドバーの [マイカレンダー] 欄の、公開するカレンダーの [︙] をクリックします。

表示されたメニューの [設定と共有] をクリックします。

[アクセス権限] 欄の [一般公開して誰でも利用できるようにする] チェックボックスをオンにして、右のドロップダウンリストで [予定の時間枠のみを表示 (詳細を非表示)] を選択します。

メモ: ドロップダウンで [予定の時間枠のみを表示 (詳細を非表示)] を選択すると、TeamPage のフルカレンダーは、Google カレンダーで予定が追加されている時間と空いている時間を表示することはできますが、予定の名前や詳細を表示することはできません。

Google カレンダー ID の取得

[カレンダーの統合] 欄に表示された [カレンダー ID] をコピーします。ID は、通常、abcd1234@group.calendar.google.com のような形式になっています。

プラグインに API キーや ID を登録

フルカレンダーのプラグイン設定の [Google カレンダー API キー] に Google カレンダーの API キーを貼り付けます。

[Google カレンダー N: ID, テキスト色, 背景色] には、カレンダーの ID、テキスト色、背景色を半角カンマ記号で区切って記入します。（下図の #fff は白を、 #269687 は青緑色を表します。詳しくは、こちらの色コード表などを参照してください。）

カレンダーに Google カレンダー上のイベントが表示されることを確認します。

下図の青緑の背景色のものが Google カレンダー上に登録されたイベントです。Google カレンダー側の設定で [予定の時間枠のみを表示 (詳細を非表示)] が選択されているため、各予定の詳細（タイトルなど）は表示されません。

Google カレンダー側の設定で [予定の時間枠のみを表示 (詳細を非表示)] を [閲覧権限 (すべての予定の詳細)] を選択すると、下図のように詳細情報（予定のタイトルなど）が表示されます。

Attachments:

plugin_configure.png
cal_button_text.png
cal_tags.png
event_tag_title.png
allusers_calendar_buttons.png
mucals_calendar_buttons.png
mucals_select_group.png
buttons.png
basic_calendar.png
add_icons.png
agenda_new.png
add_menu.png
basic_month.png
agenda_week.png
list_month.png
fullcalendar_modify_events.mov
dialog_edit_button.png
filter_admin_sano.png
google_calendar_settings.png
google_api_01.png
google_api_02.png
google_api_04.png
google_api_05.png
google_api_06.png
google_api_07.png
google_api_08.png
gcal1.png
gcal2.png
gcal3.png
gcal4.png
gcal_example1.png
gcal_example2.png
tp_gcal_setting.png
holidays1.png
holidays2.png
holidays3.png

参照されている (3)

FAQ2922: カレンダーに独自の休日や祝日を表示し、更に色分けできますか？Download2051: TeamPage 6.2.12 アップデート Download2001: フルカレンダー (FullCalendar) プラグイン

参照している (3)

Download1871: ユーザーグループプラグイン FAQ2475: スペースの「メンバー」とは何ですか？どんな役割がありますか？Download1207: 電話メモプラグイン

Article: DocJp2433 (permalink)
Date: 2017/09/19; 12時19分59秒 JST

Author Name: TeamPage サポート
Author ID: jpbo