日、週、月、議題、年、タイムラインビューなど、様々なビューで鮮やかなイベントを表示できます。
細かくグループ化されたイベントを持つ複数のカレンダーを1つのレイアウトで表示します。
既成の組み込みテンプレートオプションで、簡単にカスタマイズできます。

4.5 / 5

(650+ レビュー)

Quick Overview Video

Trusted by the world’s leading companies

Angular angular scheduler

概要

Angular Scheduler (または Angular イベントカレンダー) は、ユーザーが時間を効率的に管理するのに役立つ、豊富な機能を備えたイベントカレンダーコンポーネントです。エディターのポップアップ、ドラッグ＆ドロップ、リサイズ操作を通じて、リソースのスケジュール設定やイベントや予定の再スケジュールを容易にします。

Syncfusion Essential Studio^® Angular Scheduler を選ぶ理由

高いパフォーマンス

Angular Scheduler は、データ転送と読み込み時間を削減するために、デフォルトでオンデマンドでデータをロードします。Schedulerを異なるフィールド名を持つデータソースにバインドする場合、適切なフィールドマッピングが必須です。

シームレスなデータバインディング

データマネージャーの助けを借りて、JSON、OData、WCF、RESTful Webサービスなど、さまざまなローカルおよびリモートデータソースとシームレスにデータをバインドします。

組み込みビュー

日、週、稼働週、月、議題、月-議題、年、タイムラインなど、いくつかの異なる組み込みビューモードがあります。様々なビュー固有の変数を使用して、各ビューをカスタマイズできます。

定期的なイベント

統合された繰り返しオプションを使用して、毎日、毎週、毎月、または毎年繰り返すイベントを簡単に設定できます。

複数のリソースとグループ化

Angular Scheduler は、複数の要素に従ってリソースをグループ化するための幅広い柔軟なオプションを提供します。また、スケジューリングのタイムラインや、リソースと日付による予定のグループ化もカバーしています。

あらゆる解像度に対応

Scheduler は高いレスポンシブなレイアウトと、デスクトップ、タッチスクリーン、スマートフォン向けに最適化されたデザインを備えています。iOS、Android、またはWindows OSを使用するすべての携帯電話でうまく機能します。

魅力的なカスタマイズ可能なテーマ

Fluent、Tailwind CSS、Bootstrap、Material、Fabricなど、5つ以上の組み込みテーマを備えた最先端のデザイン。Scheduler のテーマを簡単にカスタマイズするには、オンラインのTheme Studioツールを活用してください。

グローバリゼーションとローカライゼーション

日付、通貨、番号付けをユーザーの好みに合わせてフォーマットすることで、異なるロケールからのユーザーがSchedulerを使用できるようにします。

AI駆動Schedulerによるスマートなプランニング

当社のAI駆動Schedulerで、よりスマートなスケジューリングを体験してください。
「毎週金曜日の10時にチームミーティング」と入力するだけで、イベントを自動的に整理し、競合を解消し、ワークフローに適応します。カレンダーは単に時間を記録するだけでなく、最大限に活用するのに役立ちます。

AI Schedulerのライブデモを見る

AI搭載Angular Schedulerコンポーネント。

Angular Scheduler コード例

次のように、数行のシンプルなHTMLとTSコードでAngular Schedulerを簡単に使い始めることができます。また、Angular で Scheduler をレンダリングおよび設定する方法を示すAngular Scheduler の例もをご覧ください。

html
ts
<ejs-schedule [selectedDate]="selectedDate" [eventSettings]="eventSettings">
</ejs-schedule>
//app.component.ts
import { Component } from '@angular/core';
import { EventSettingsModel, DayService, WeekService, WorkWeekService, MonthService, AgendaService } from '@syncfusion/ej2-angular-schedule';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService]
})

export class AppComponent {
  public selectedDate: Date = new Date(2022, 1, 20);
  private data: Object[] = [
    {
      Id: 1,
      Subject: 'Scrum Meeting',
      Location: 'Office',
      StartTime: new Date(2022, 1, 12, 9, 30),
      EndTime: new Date(2023, 1, 12, 10, 30),
      RecurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR;INTERVAL=1'
    },
  ];

  public eventSettings: EventSettingsModel = { dataSource: this.data };
}

//app.module.ts
import { ScheduleModule } from '@syncfusion/ej2-angular-schedule';

import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from '../app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [CommonModule, ScheduleModule, BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

複数のスケジューラビュー

日、週、稼働週、月、議題、月-議題、年、タイムラインなど、各種の組み込みビューモードが利用可能です。異なるビュー固有のオプションで、個々のビューを簡単に構成できます。

Day View in Angular Scheduler component.

日、週、稼働週ビュー

単一の日または複数日にわたる予定を表示します。

日、週ビューのドキュメント

Month View in Angular Scheduler component.

月ビュー

1日または複数日のイベントや予定を丸1ヶ月表示します。

月ビューのドキュメント

Agenda view in Angular Scheduler component.

議題ビュー

イベントを仮想的に読み込み、日付ごとにグループ化されたリストとして順番に表示します。議題ビューで最初に読み込む日数を指定するオプションが存在します。

議題ビューのドキュメント

Month agenda view in Angular Scheduler component.

月議題ビュー

カレンダーレイアウトと現在選択されている日付のイベントを表示します。日付の下にある丸いインジケータは、その日に1つ以上のイベントが存在することを示します。

月議題ビューのドキュメント

Year view in Angular Scheduler component.

年ビュー

年ビューは、特定の年のすべての月をカレンダービュー形式で表示します。そのカレンダービューでは、イベントや予定が含まれる日付が、個々の日付の下に配置された点で強調表示されます。日付をクリックすると、イベントのポップアップが表示され、イベントがリストされます。

年ビューのドキュメント

タイムラインビュー

Angular は、タイムライン日、タイムライン週、タイムライン稼働週、タイムライン月、タイムライン年の5つの組み込みタイムラインビューを提供します。各ビューは、単一の日または複数日にわたって水平タイム軸上にイベントを正確に表示します。

パフォーマンスを向上させるため、タイムラインビューはスクロールアクションごとにリソース、イベント、予定を仮想的にロードします。

タイムラインスケジューリングの詳細

Timeline view in Angular Scheduler component.

Unique view in Angular Scheduler component.

独自のビュー設定

様々なカレンダー設定で、各個別のビューモードを簡単に設定できます。例えば、月ビューでグループ化機能を有効にし、週ビューでイベントテンプレートを適用することができます。

拡張可能なビュー間隔

提供された間隔数に基づいて各ビューモードを拡張することで、複数の日、週、月を表示します。

Extensible view intervals in Angular Scheduler component.

Block time intervals in Angular Scheduler component.

時間間隔をブロック

Angular Event Calendar の特定の時間範囲をブロックして、そのタイムスロットでのイベントや予定の作成を防ぐことができます。

インライン予定

この機能を有効にすると、ユーザーはスケジューラセルまたは既存の予定の件名をシングルクリックでインラインで予定を作成および編集できます。新しい件名テキストをインラインテキストボックスに入力した後Enter キーを押すと、予定が適切に更新および保存されます。

Inline appointment in Angular Scheduler component.

高度なイベント処理オプション

Angular Event Calendar は、割り当てられた時間に基づいて、Scheduler タイムライン上でイベントや予定を明確、鮮明、正確に表現します。

イベント編集オプションの詳細

Illustration of add and edit capabilities of Angular Scheduler.

追加と編集の機能

デフォルトのイベントエディタを使用したり、直感的なドラッグ＆リサイズ操作を通じて、予定をより簡単に作成および編集する組み込みサポートが備わっています。さらに、イベントとリソースデータソースの両方にカスタムデータフィールドを追加することもできます。

Illustration of multiple event selection in Angular Scheduler.

複数イベント選択

イベントをクリックしながらCtrlキーを押し続けることで、複数のイベントを一度に簡単に選択できます。モバイルデバイスでは、イベントをタップして押し続け、他のイベントをシングルタップすることで同様の操作が可能です。イベントが正常に選択された後、それらを同時に削除または再配置できます。

Illustration of event tooltips of Angular Scheduler.

ツールチップ

カスタマイズ可能なツールチップは、マウスカーソルがイベントの上に置かれている間、イベント情報を表示します。モバイルデバイスでは、イベントをタップして押し続けることで同様の操作が可能です。

ツールチップの例

Illustration of event customization with Angular Scheduler.

外観のカスタマイズ

Angular Scheduler のイベントや予定の外観とスタイルを、HTMLやCSSを使用してカスタマイズすることで、デフォルトの外観を変更できます。

Illustration of time zone support of Angular Scheduler.

タイムゾーン

システムタイムゾーンに関わらず、Angular Event Calendar はコントロール自体およびイベントに必要なタイムゾーンを設定することをサポートしています。

Illustration of clipboard support of Angular Scheduler.

クリップボード

Angular Scheduler はクリップボード機能をサポートしており、ユーザーはイベントを効率的に管理できます。ユーザーはCtrl+Cショートカットを使用して選択したイベントをコピーし、Ctrl+Xでイベントをカットし、Ctrl+Vを使用して異なるタイムスロットにイベントを貼り付けることができます。

クリップボードの例

Row auto height in Angular Scheduler component.

行の自動調整

Angular Event Calendar には、新しい同時イベントや予定が追加されたときに、月ビューおよびタイムラインビューの行の高さを自動的に増やす組み込みオプションが追加されました。

コンテキストメニュー

Angular Scheduler と統合されたコンテキストメニューは、セルまたは予定を右クリックすると開きます。

Context menu in Angular Scheduler component.

リアルタイムデータ同期

リアルタイムの予定データは、Angular Scheduler と正確に同期します。

Illustration of Google Calendar integration with Angular Scheduler.

Outlook および Google カレンダー連携

Google Calendar API または Microsoft Outlook のオブジェクトライブラリを介して、Angular Event Calendar と Google または Outlook Calendar 間でイベントを簡単に同期できます。

カレンダー連携の例

Illustration of real-time updates in Angular Scheduler.

リアルタイム更新

双方向データ通信により、Scheduler で行われたサーバー側の予定更新がSignalRを介して接続されているすべてのクライアントに伝達されます。

リアルタイムバインディングの例

豊富なカレンダーオプション

Angular Event Calendar は、週の最初の曜日やタイムスケールなど、カレンダーに特化したほぼすべての機能を継承しています。

Illustration of first day of the week in Angular Scheduler.

週の最初の曜日

週の最初の曜日をカスタマイズできます。デフォルトでは日曜日ですが、個別のビューでもこのオプションを利用できます。

週の最初の曜日の例

Illustration of setting start and end hours on Angular Scheduler.

開始時刻と終了時刻のカスタム設定

不要な時間を隠すことで、特定の期間を持つイベントスケジューラのレイアウトを表示します。

スケジューラ時間制限の例

Illustration of timescale options in Angular Scheduler.

柔軟なタイムスケール

カスタマイズ可能なタイムスケールオプションを使用して、イベントのタイムラインを明確に表示し、異なる期間を設定できます。

タイムスケールの例

Illustration of working time in Angular Scheduler.

労働時間

スケジューラの稼働セル（白色で表示）は、稼働日と稼働時間を視覚的に表します。

稼働時間の例

Illustration of current time highlighting in Angular Scheduler.

現在時刻のハイライト表示

ハイライトされた日付ヘッダーで現在の日付を示します。すべてのビューで現在時刻を正確にマークします。

現在時刻のハイライト表示

Illustration of hiding weekend days in Angular Scheduler.

週末の非表示

Scheduler から週末を非表示にすることで、すべてのビューで稼働日のみを表示できます。

週末を非表示にする例

Illustration of displaying week numbers in Angular Scheduler.

週番号表示

日、週、稼働週ビューでは、現在の日付範囲の週番号を日付ヘッダーの横に表示します。また、月ビューでは週番号を最初の列に表示します。週番号は、週の最初の曜日と週ルール (最初の日、最初の完全な週、または最初の4日間の週) によって決定されます。

Illustration of displaying time format in Angular Scheduler.

時刻モード

Scheduler コントロールは、12時間形式と24時間形式の両方をサポートしています。

完全にカスタマイズ可能なUI

HTMLとCSSスタイルを使用して、Scheduler インターフェースのあらゆる部分の外観をカスタマイズできます。

Illustration of date header customization in Angular Scheduler.

日付ヘッダー

CSS、カスタムテキスト、または画像を追加して、ヘッダーバーのデフォルトの外観を変更します。

日付ヘッダーカスタマイズの例

Illustration of complete Angular Scheduler customization.

完全なスケジューラUI

組み込みのクライアント側イベントにより、エンドユーザーは Scheduler のユーザーインターフェースのあらゆる部分をカスタマイズできます。

UIカスタマイズのドキュメント

Illustration of common header bar in Angular Scheduler.

ヘッダーバー

デフォルトのヘッダーバーオプションにカスタムアイテムを追加します。共通のヘッダーバーオプションを非表示または表示できます。

ヘッダーバーの例

Illustration of cell customization with Angular Scheduler.

スケジューラセル

既成のテンプレートオプションにより、あらゆる種類のテキスト、画像、またはCSSを追加してセルを簡単にカスタマイズできます。

セルカスタマイズの例

Illustration of quick pop-ups in Angular Scheduler.

クイックポップアップ

セル、イベント、または予定をシングルクリックしたときに開くポップアップを、独自のUIまたはテンプレートデザインで簡単にカスタマイズできます。

クイックポップアップのドキュメント

Illustration of event editor in Angular Scheduler.

イベントエディターを外部で開く

Angular Event Calendar は、デフォルトのイベントエディターウィンドウをプログラムで開くための組み込みメソッドを提供します。

イベントエディターを開くドキュメント

ユーザーフレンドリーなインタラクション

Angular Scheduler のモダンでトレンディな UI デザインは、ユーザーインタラクションをよりシンプルかつ効率的にします。

Pop-up displaying event information.

クイックイベント概要

イベントをクリックまたはタップすると、件名や時刻などの重要な詳細と、編集および削除オプションが表示されます。

Angular Scheduler cell selection.

セル選択

ポインタを Scheduler セル上でクリック＆ドラッグすると、複数セルを選択できます。キーボードショートカットでも同様の操作が可能です。

Event container in Angular Scheduler.

イベントコンテナ

月ビューとタイムラインビューでテキストインジケーター（+n件など）をクリックすると、その日の非表示イベントと予定の詳細すべてをリストアップするイベントコンテナが開きます。

Navigation options in Angular Scheduler.

クイックナビゲーション

Angular Schedulerは、インラインカレンダーを使用して日付範囲間を前後に移動する直感的な方法と、異なるビューモード間を移動する直感的な方法を提供します。

Angular event calendar used in real-time applications.

リアルタイムアプリケーション

多くのリアルタイムアプリケーションでは、スケジューラが不可欠な部分として使用されており、プロジェクトの種類に応じて異なる目的を果たします。アクティブなアプリケーションの例としては、運賃カレンダー、会議室カレンダー、医師の予約プランナー、ホテル客室予約などがあります。

対話型機能

Angular Scheduler を使用すると、イベントを Excel ファイルまたは ICS ファイルとして2つの方法でエクスポートできます。

Illustration of Excel export support in Angular Scheduler.

Excelへのエクスポート

Angular Scheduler は、すべてのイベントをデフォルトで Excel ドキュメントにエクスポートできます。また、カスタムイベントデータコレクションをエクスポートするための追加のカスタマイズオプションも提供します。

Excelエクスポートの例

Illustration of export and import ICS files in Angular Event Calendar.

ICSのエクスポートとインポート

Angular Event Calendar は、すべてのイベントデータを iCal 形式にエクスポートすることをサポートしており、iCal ファイルからイベントを Scheduler にインポートすることもサポートしています。

ICSエクスポートとインポートの例

Angular Scheduler developer-friendly APIs.

開発者向けのAPI

開発者は、組み込みの、開発者向けのAPIを通じて、イベントカレンダーのUIと動作を完全に制御できます。これにより、複雑なScheduler機能も簡単にカスタマイズできます。

アクセシビリティ

Angular Scheduler コンポーネントは、スクリーンリーダーで簡単にアクセスできます。完全なキーボード操作サポートも提供されています。

Accessibility enabled Angular Scheduler.

完全にアクセシブル

Angular Scheduler コンポーネントは、WAI-ARIAアクセシビリティを完全にサポートしています。Scheduler UI には高コントラストの視覚要素が含まれており、視覚障害者にとって最高の表示体験を提供します。また、適切なUI記述は、スクリーンリーダーなどの補助技術を通じて簡単にアクセスできます。

アクセシビリティのドキュメント

Keyboard interactive Angular event calendar.

キーボード操作可能

複数セルやイベントの選択、他のビューへの移動など、Scheduler のほとんどすべてのアクションを実行するための様々なキーボードショートカットが利用可能です。

キーボード操作

Right to left support in Angular Scheduler.

右から左 (RTL)

イベントスケジューラを適切な右から左への表記に従ってレンダリングします。

右から左へのドキュメント

Angular バージョンの互換性

Angular バージョンの継続的な改善に伴い、Angular Scheduler はバージョン4から最新バージョンまで互換性を持つよう常に最新の状態に保たれています。

Angular Scheduler バージョン互換性の詳細

Scheduler Angular version compatibility.

その他のサポート対象フレームワーク

Scheduler は、Blazor、React、JavaScript、および Vue フレームワークで利用できます。以下のリンクから、プラットフォーム固有のオプションをご覧ください。

サポートされているブラウザ

Angular Scheduler は、Chrome、Firefox、Edge、Safari、Operaを含むすべての最新のWebブラウザでうまく機能します。

Supported browsers in Angular Scheduler.

最初のAngular Schedulerの作成方法がわからないですか？私たちのチュートリアルビデオとドキュメントがお役に立ちます。

今すぐ見たい今すぐ読みたい

すべてのコンポーネント

スマートコンポーネント

グリッド

データ可視化

カレンダー

ドロップダウン

ファイルビューア & エディタ

ボタン

インタラクティブチャット

入力

ナビゲーション

レイアウト

フォーム

Query Builder UI

通知

よくある質問

✅ Syncfusion Essential Studio^® Angular Scheduler を選ぶ理由は何ですか？

デスクトップ、タブレット、携帯電話向けに、非常にレスポンシブなレイアウトと最適化されたデザイン。
日、週、稼働週、月といった様々な基本ビューや、カレンダーモードの年ビュー、タイムラインモードも。
仮想スクロールにより、大量のリソースとイベントを動的に読み込み可能。
異なるタイムゾーンに瞬時に対応。
タイムライン、水平、階層、日付ビューに基づいた複数リソースのグループ化。
ソフトウェアとの対話に豊富なUIを提供する、市場で最高のAngular Schedulerの1つ。
GoogleおよびOutlookカレンダーとのイベントの簡単な同期。
簡単な設定とAPI。
すべてのモダンブラウザに対応。
Angular Schedulerを迅速に学習し、使い始めるためのデモ、ドキュメント、ビデオなどの豊富な学習リソース。

✅ Syncfusion Angular Scheduler の価格はいくらですか？

Angular Scheduler を単独で販売することはありません。それはSyncfusion チームライセンスの一部としてのみ購入可能です。これにはAngular Schedulerを含む 1,600 個以上のコンポーネントとフレームワークが含まれています。チームライセンスの価格は、開発者5人の場合、月額395ドルから始まり、サブスクリプションの有効期限までサポートとアップデートが含まれます。さらに、現在実施中のプロモーションによっては割引を提供できる場合があります。追加の割引が適用されるかどうかは、今日弊社の製品スペシャリストにお問い合わせください。

✅ Syncfusion Angular Scheduler のデモはどこで見つけられますか？

Scheduler のレンダリングと設定方法を示すAngular Scheduler のデモをご覧ください。

✅ Syncfusion Angular Scheduler コンポーネントを個別に購入できますか？

いいえ、弊社の 1,600+ 個のWeb、モバイル、デスクトップ用コンポーネントおよびフレームワーク（Angular Schedulerを含む）は、個別に販売しておりません。これらはチームライセンスの一部としてのみご利用いただけます。ただし、競合他社がSchedulerコンポーネント単体で請求するよりもわずかに高い価格で製品を設定しているため、お客様にとって費用対効果が高くなっています。また、経験上、お客様は通常、弊社の製品の1つを使い始め、すぐに複数の製品に拡大する傾向があるため、開発者5人のチーム向けには、月額395ドルから始まるサブスクリプション料金で、1,600+ 個すべてのコンポーネントとフレームワークを提供するのが最善であると考えました。さらに、現在実施中のプロモーションによっては、割引を提供できる場合があります。追加の割引が適用されるかどうかは、今日弊社の製品スペシャリストにお問い合わせください。

✅ Syncfusion Angular Scheduler を無料でダウンロードして利用できますか？

いいえ、これは商用製品であり、有料ライセンスが必要です。ただし、年間売上高が100万米ドル未満で、開発者が5人以下の企業や個人向けには、無料のコミュニティライセンスも利用可能です。

✅ Syncfusion Angular Scheduler を使い始めるにはどうすればよいですか？

包括的なスタートガイドのドキュメントから始めるのが良いでしょう。

お客様は私たちを愛しています

優れたツール群と充実したサポートチームにより、Syncfusion^® はお客様の開発時間を短縮します。
お客様の体験談の一部をご紹介します。

An amazing toolset to accelerate UI development

The number of components available is the best thing about this library. We think of a UI component, and the Angular JS library already offers it. We use the Angular JS library to accelerate development. The experience using and implementing has been great. The support is also excellent.

Shrikant P.

Customer Success Manager

A giant framework with great pricing options

I have loved the components and options that Syncfusion has, besides, its documentation, demos, and Support are excellent.

Alejandro Javier V.

CEO

実際の成功事例を見る

世界中の開発者が複雑なプロジェクトを簡素化し、納期を短縮するために Syncfusion の Essential Studio を信頼しています。豊富な UI コントロールライブラリ、強力な SDK、信頼できるサポートにより、Essential Studio はチームがエンタープライズ対応のアプリケーションを自信を持って構築できるよう支援します。

ケーススタディを探る

産業

ソフトウェア開発

75% コスト削減

50% より迅速な開発

“If somebody is looking for a great tool to work with? Yes. I would definitely recommend Syncfusion for anyone who is trying to develop something meaningful.”

- Somnath Maji (Founder of Igniatek Consultancy)

Read Story

産業

公益事業 (石油・ガス)