JavaScript Scheduler - 柔軟なイベントカレンダーコントロール
- 日、週、月、議題、年、タイムラインなど、さまざまなビューで鮮やかなイベントを表示できます。
- 細かくグループ化されたイベントを持つ複数のカレンダーを単一のレイアウトに表示します。
- Google カレンダーと Outlook カレンダーと簡単にイベントを同期できます。
Trusted by the world’s leading companies
概要
JavaScript Scheduler、またはイベントカレンダーは、ユーザーが時間を効率的に管理するのに役立つ、豊富な機能を備えたイベントカレンダーコンポーネントです。エディタポップアップ、ドラッグアンドドロップ、サイズ変更アクションを通じて、リソースのスケジュール設定やイベントまたは予定の再スケジュールを容易にします。
Syncfusion JavaScript Scheduler を選ぶ理由
高いパフォーマンス
Scheduler は、転送と読み込み時間を短縮するため、デフォルトでオンデマンドでデータを読み込みます。異なるフィールド名を持つデータソースにScheduler をバインドする際には、適切なフィールドマッピングが必須です。
シームレスなデータバインディング
データマネージャーの助けを借りて、JSON、OData、WCF、RESTful Web サービスなどのさまざまなローカルおよびリモートデータソースとデータをシームレスにバインドします。
組み込みビュー
日、週、稼働週、月、議題、月-議題、年、タイムラインなど、いくつかの異なる組み込みビューモードが利用可能です。さまざまなビュー固有の変数を使用して、各ビューをカスタマイズできます。
繰り返しイベント
統合された繰り返しオプションを使用して、繰り返しイベントを日次、週次、月次、年次で簡単に繰り返すように設定できます。
複数のリソースとグループ化
複数の要因に応じてリソースをグループ化するために、Scheduler は幅広い柔軟なオプションを提供します。また、リソースと日付によるスケジュールタイムラインと予定のグループ化もカバーしています。
あらゆる解像度に対応
Scheduler は高い応答性を持つレイアウトと、デスクトップ、タッチスクリーン、スマートフォン向けに最適化されたデザインを備えています。iOS、Android、またはWindows OSを使用するすべての携帯電話でうまく機能します。
魅力的なカスタマイズ可能なテーマ
Fluent、Tailwind CSS、Bootstrap、Material、Fabric など、5つ以上の組み込みテーマを備えた最先端のデザイン。Scheduler のテーマを簡単にカスタマイズするには、オンラインの Theme Studio ツールを利用してください。
グローバリゼーションとローカリゼーション
異なるロケールのユーザーが日付、通貨、数値のフォーマットを好みに合わせて調整できるようにすることで、Scheduler を使用できます。
AI搭載 Schedulerによる効率的な時間管理
AI Schedulerを使って生産性を向上させましょう。”毎週金曜日の午前10時にチームミーティングをスケジュール”のようなコマンドを入力するだけで、最適な時間を提案し、重複を避け、カレンダーを視覚的に整理します。
JavaScript Scheduler のコード例
以下の HTML と TSX コードの数行で、JavaScript Scheduler を簡単に使い始めることができます。また、Scheduler をJavaScriptでレンダリングおよび構成する方法を示すJavaScript Scheduler の例も参照してください。
<html>
<head>
<link href=https://cdn.syncfusion.com/ej2/material.css rel="stylesheet">
</head>
<body>
<div class="control-section">
<div id="Schedule"></div>
</div>
</body>
</html>import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
let 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'
}
];
let scheduleObj: Schedule = new Schedule({
selectedDate: new Date(2022, 1, 20),
eventSettings: { dataSource: data }
});
scheduleObj.appendTo('#Schedule');複数のScheduler ビュー
日、週、稼働週、月、議題、月-議題、年、タイムラインなど、さまざまな組み込みビューモードが利用可能です。さまざまなビュー固有のオプションを使用して、各個別ビューを簡単に構成できます。
月次議題ビュー
カレンダーレイアウトと現在選択されている日付のイベントを表示します。日付の下にある丸いインジケータは、その日に1つ以上のイベントが存在することを示します。
年次ビュー
年次ビューは、特定の年のすべての月をカレンダービュー形式で表示します。そのカレンダービューでは、イベントや予定を含む日付には、個々の日付の下に配置されたドットで強調表示されます。日付をクリックすると、イベントポップアップが表示され、イベントがリストされます。
タイムラインビュー
JavaScript は、タイムライン日、タイムライン週、タイムライン稼働週、タイムライン月、タイムライン年の5つの組み込みタイムラインビューを提供します。各ビューは、単一の日または複数日の水平時間軸全体にイベントを正確に表示します。
パフォーマンスを向上させるために、タイムラインビューは、すべてのスクロールアクションでリソース、イベント、および予定を仮想的に読み込みます。
ユニークなビュー構成
さまざまなカレンダー設定で各個別ビューモードを簡単に構成できます。たとえば、月次ビューでグループ化機能を有効にし、週次ビューでイベントテンプレートを適用できます。
インライン予定
この機能が有効な場合、ユーザーはScheduler のセルまたは既存の予定の件名をシングルクリックすることで、インラインで予定を作成および編集できます。インラインテキストボックスに新しい件名を入力した後、Enterキーを押すと、予定が適切に更新および保存されます。
高高度なイベント処理オプション
JavaScript イベントカレンダーは、割り当てられた時間に基づいて、Scheduler のタイムライン全体にわたるイベントと予定の明確で鮮やかで正確な表現を提供します。
追加および編集機能
デフォルトのイベントエディタを使用するか、直感的なドラッグアンドサイズ変更アクションを通じて、予定の作成と編集を容易にするなど、イベント処理を改善するための組み込みのサポートがあります。さらに、イベントとリソースデータソースの両方にカスタムデータフィールドを追加することもできます。
複数イベント選択
Ctrlキーを押しながらイベントをクリックすることで、一度に複数のイベントを簡単に選択できます。モバイルデバイスでは、イベントをタップして押し続けることで同じ操作を行い、単一タップで他のイベントを選択し続けることができます。イベントを正常に選択した後、それらを同時に削除または再配置できます。
ツールチップ
L’infobulle personnalisable affiche les informations de l’événement lorsque le pointeur de la souris survole l’événement. Faites de même sur les appareils mobiles en appuyant et en maintenant un événement.
外観のカスタマイズ
Modifiez l’apparence des événements et des rendez-vous du Scheduler JavaScript en personnalisant leur apparence et leur style par défaut à l’aide de n’importe quel HTML ou CSS.
Fuseau horaire
Indépendamment du fuseau horaire du système, le Calendrier d’événements JavaScript prend en support la définition du fuseau horaire requis pour le contrôle lui-même, ainsi que pour les événements.
クリップボード
JavaScript Scheduler はクリップボード機能をサポートしており、ユーザーはイベントを効率的に管理できます。ユーザーは Ctrl+C ショートカットを使用して選択したイベントをコピーし、Ctrl+X でイベントをカットし、Ctrl+V で異なるタイムスロットにイベントを貼り付けることができます。
Lignes adaptatives
Une option intégrée a été ajoutée au Calendrier d’événements JavaScript pour augmenter automatiquement la hauteur des lignes dans les vues mensuelles et chronologiques lorsque de nouveaux événements ou rendez-vous simultanés sont ajoutés.
Menu contextuel
Le menu contextuel intégré au Scheduler JavaScript s’ouvre lorsqu’une cellule ou un rendez-vous is cliqué avec le bouton droit de la souris.
Synchronisation de données en temps réel
Les données de rendez-vous en temps réel se synchronisent précisément avec notre Scheduler JavaScript.
Outlook および Google カレンダー統合
Google Calendar API または Microsoft Outlook のオブジェクトライブラリを介して、JavaScript イベントカレンダーと Google または Outlook カレンダーの間でイベントを簡単に同期します。
リアルタイム更新
双方向データ通信により、Scheduler で行われたサーバー側の予定更新が、SignalR を介して接続されているすべてのクライアントに伝達されます。
Options de calendrier riches en fonctionnalités
Le Calendrier d’événements JavaScript hérite de presque toutes les fonctionnalités spécifiques au calendrier, telles que le premier jour de la semaine et l’échelle de temps.
Premier jour de la semaine
Personnalisez le premier jour de la semaine, qui par défaut est le dimanche, selon les paramètres régionaux. Vous pouvez également utiliser cette option pour des vues individuelles.
Heures de début et de fin personnalisées
Affichez la mise en page du Scheduler d’événements avec des durées spécifiques en masquant les heures indésirables.
Échelle de temps flexible
Utilisez des options d’échelle de temps personnalisables pour afficher clairement une chronologie des événements et définir une durée différente.
Temps de travail
Les cellules actives du Scheduler (affichées en blanc) représentent visuellement les jours de travail et les heures de travail.
Masquage des jours de week-end
Le masquage des jours de week-end du Scheduler vous permet d’afficher uniquement les jours ouvrables dans toutes les vues.
Affichage du numéro de semaine
Affichez le numéro de semaine de la plage de dates actuelle à côté de l’en-tête de date dans les vues jour, semaine et semaine de travail. Affichez également le numéro de semaine dans la vue mensuelle comme première colonne. Le numéro de semaine is déterminé par le premier jour de the semaine et les règles (premier jour ou première semaine complète, ou première semaine de quatre jours).
Mode horaire
Le contrôle du Scheduler prend en support les formats d’heure de 12 heures et de 24 heures.
Interface utilisateur entièrement personnalisable
Personnalisez l’apparence de n’importe quelle partie de l’interface du Scheduler à l’aide de styles HTML et CSS.
En-tête de date
Modifiez l’apparence par défaut de la barre d’en-tête en ajoutant n’importe quel type de CSS, de texte personnalisé ou d’image.
Interface utilisateur complète du Scheduler
Un événement côté client intégré permet aux utilisateurs finaux de personnaliser n’importe quelle partie de l’interface utilisateur du Scheduler .
Barre d’en-tête
Ajoutez des éléments personnalisés aux options de barre d’en-tête par défaut. Vous pouvez masquer ou afficher les options de barre d’en-tête communes.
Cellules du Scheduler
Les options de modèle prêtes à l’emploi vous permettent de personnaliser facilement les cellules en ajoutant n’importe quel type de texte, d’image ou de CSS.
Pop-ups rapides
Personnalisez facilement les pop-ups qui s’ouvrent en un seul clic sur les cellules, les événements ou les rendez-vous avec votre propre interface utilisateur ou conception de modèle.
Ouvrir l’éditeur d’événements en externe
Le Calendrier d’événements JavaScript offre une méthode intégrée pour ouvrir la fenêtre de l’éditeur d’événements par défaut par programmation.
Interactions conviviales
La conception UI moderne et tendance du Scheduler JavaScript rend les interactions utilisateur plus simples et plus efficaces.
Aperçu rapide de l’événement
Un clic ou un toucher sur les événements affiche leurs détails importants, tels que le sujet et l’heure, ainsi que les options de modification et de suppression.
Sélection de cellules
Cliquez et faites glisser le pointeur sur les cellules du Scheduler pour une sélection multiple de cellules. Vous pouvez faire de même avec les raccourcis clavier.
Conteneur d’événements
Un clic sur l’indicateur de texte (+n more) dans les vues mensuelles et chronologiques ouvrira un conteneur d’événements listant tous les détails d’événements et de rendez-vous masqués d’une journée.
Navigation rapide
Le Scheduler JavaScript offre un moyen intuitif de naviguer d’avant en arrière entre les plages de dates à l’aide d’un calendrier intégré, et également de naviguer entre différents modes de vue.
Applications en temps réel
De nombreuses applications en temps réel utilisent des Scheduler s comme partie intégrante, servant ainsi à des fins différentes en fonction du type de projet. Certaines des applications actives sont : Calendrier des tarifs, Calendrier des salles de réunion, Scheduler de rendez-vous chez le médecin et Réservation de chambres d’hôtel.
Fonctionnalités interactives
Le Scheduler JavaScript permet aux utilisateurs d’exporter ses événements de deux manières : sous forme de fichier Excel ou de fichier ICS.
Exporter vers Excel
Le Scheduler JavaScript vous permet d’exporter tous ses événements vers un document Excel par défaut. Il offre également des options de personnalisation supplémentaires pour exporter des collections de données d’événements personnalisées.
Exporter et importer des ICS
Le Calendrier d’événements JavaScript prend en support l’exportation de toutes ses données d’événements au format iCal, et il prend en support l’importation d’événements à partir d’un fichier iCal dans le Scheduler .
API conviviales pour les développeurs
Les développeurs peuvent avoir un contrôle total sur l’interface utilisateur et le comportement du calendrier d’événements grâce à ses API intégrées et conviviales. Il vous permet de personnaliser même les fonctionnalités complexes du Scheduler avec facilité.
Accessibilité
Le composant Scheduler JavaScript is facilement accessible par les lecteurs d’écran. Un support complet d’interaction au clavier a également été fourni.
Complètement accessible
Le composant Scheduler JavaScript a un support complet d’accessibilité WAI-ARIA. L’interface utilisateur du Scheduler comprend des éléments visuels à contraste utile, offrant aux personnes malvoyantes the meilleure expérience de visualisation. De plus, des descriptions d’interface utilisateur valides sont facilement accessibles grâce aux technologies d’assistance telles que les lecteurs d’écran.
Interactif au clavier
Divers raccourcis clavier sont disponibles pour effectuer presque toutes les actions du Scheduler , telles que la sélection multiple de cellules ou d’événements et la navigation vers d’autres vues.
De droite à gauche (RTL)
Affichez the Scheduler d’événements en respectant les conventions de droite à gauche.
Autres frameworks supportés
Le Scheduler est disponible dans les frameworks Blazor, React, Angular et Vue. Explorez ses options spécifiques à la plateforme via les liens suivants :
Navigateurs supportés
Le Scheduler JavaScript fonctionne bien avec tous les navigateurs web modernes, y compris Chrome, Firefox, Edge, Safari et Opera.
Vous ne savez pas comment créer votre premier Scheduler JavaScript ? Notre documentation peut vous aider.
今すぐ読むよくある質問
Pourquoi devriez-vous choisir le Scheduler JavaScript de Syncfusion ?
豊富な機能を備えたJavaScript Scheduler は、以下を提供します。
- デスクトップ、タブレット、モバイル向けに最適化された、高い応答性を持つレイアウトと洗練されたデザイン。
日、週、稼働週、月など、さまざまな基本ビューと、カレンダーモードの年次ビュー、タイムラインモード.
仮想スクロールにより、大量のリソースとイベントを動的に読み込むことができます。
- S’adapte instantanément à différents fuseaux horaires.
タイムライン, 水平, 階層, 日付ビューに基づく複数のリソースグループ化.
- Synchronisation facile des événements avec les calendriers Google et Outlook.
- L’un des meilleurs Scheduler s JavaScript du marché qui offre une interface utilisateur riche en fonctionnalités pour interagir avec le logiciel.
簡単な構成とAPI.
- Prise en charge de tous les navigateurs modernes.
Syncfusion JavaScript Scheduler の価格は？
JavaScript Scheduler は個別に販売していません。Syncfusion チームライセンスの一部としてのみ購入できます。これには、JavaScript Scheduler を含む 1,600以上のコンポーネントとフレームワークが含まれています。チームライセンスの価格は、開発者5人に対して月額395ドルから始まり、サブスクリプションの有効期限までサポートとアップデートが含まれます。さらに、現在実施中のプロモーションに基づいて割引を提供できる場合があります。追加の割引が適用されるかどうかについては、今すぐ製品スペシャリスト今日利用可能かどうかについてご確認してください。
Où puis-je trouver la démo du Scheduler JavaScript de Syncfusion ?
Vous pouvez trouver notre démo du Scheduler JavaScriptをご覧いただけます。
Puis-je acheter le composant Scheduler JavaScript de Syncfusion séparément ?
いいえ、弊社の 1,600以上のWeb、モバイル、およびデスクトップ用のコンポーモントとフレームワーク（JavaScript Scheduler を含む）は、個別に販売されていません。チームライセンスの一部としてのみ利用可能です。ただし、弊社は競合他社がScheduler コントロールのみで請求する金額よりわずかに高いだけで、競争力のある価格を設定しています。また、弊社の経験から、お客様は通常、弊社の製品のいずれか1つを使用し始め、すぐに複数の製品に拡張するため、開発者5人のチームに対して月額395ドルから始まるサブスクリプション料金ですべての 1,600以上のコンポーネントとフレームワークを提供するのが最善であると感じました。さらに、現在実施中のプロモーションに基づいて割引を提供できる場合があります。追加の割引が適用されるかどうかについては、今すぐ製品スペシャリストにお問い合わせください。
Puis-je télécharger et utiliser gratuitement le Scheduler JavaScript de Syncfusion ?
いいえ、これは商用製品であり、有料ライセンスが必要です。ただし、年間売上総収入が100万米ドル未満で、開発者が5人以下の企業や個人向けに無料のコミュニティライセンスも利用可能です。
Comment démarrer avec le Scheduler JavaScript de Syncfusion ?
キーボーインはじめにドキュメントから始めるのが良いでしょう。
お客様は私たちを愛しています
優れたツール群と充実したサポートチームにより、Syncfusion® はお客様の開発時間を短縮します。お客様の体験談の一部をご紹介します。
Light and fast
I like JS controls the most, they are simple to use and easy to integrate to JS apps. In ASP.NET MVC your controls behave very nice, although I consider I have more control by using the JS version.
Alexis A.
Software Architect
Syncfusion - Great controls and terrific support
The best in Syncfusion is the attention and efforts spent by the technical support whenever needed. It’s priceless. The Syncfusion controls are really usefull to accelerate my projects, mainly those things related to UI.
David B.
CEO
実際の成功事例を見る
世界中の開発者が複雑なプロジェクトを簡素化し、納期を短縮するために Syncfusion の Essential Studio を信頼しています。豊富な UI コントロール ライブラリ、強力な SDK、信頼できるサポートにより、Essential Studio はチームがエンタープライズ対応のアプリケーションを自信を持って構築できるよう支援します。
ケーススタディを探る産業
ソフトウェア開発
75% コスト削減
50% より迅速な開発
産業
公益事業 (石油・ガス)
450+ 節約された時間
プロセスを合理化し、開発工数を大幅に削減
高度で柔軟な機能
強力で多用途な機能によりユーザーを支援
産業
ソフトウェアと技術
1000+ 節約された時間
エンタープライズ対応の UI コンポーネントで開発を加速
効率的なファイル管理
ドキュメント ライブラリにより、ゼロから構築することなくワークフローを合理化
産業
ソフトウェアと技術
2年 回避された遅延
プロアクティブな計画により 2 年間の遅延を防止
予定どおりの納品
信頼性の高いコントロールを使用してプロジェクトを期日どおりに納品
産業
ITサービスとITコンサルティング
パフォーマンスの向上
大規模データセットを簡単なカスタマイズと迅速なデバッグで処理
高いカスタマイズ性
プラグアンドプレイ方式のコントロールによりテンプレートを素早く統合
産業
プロフェッショナルサービス
即時アクセス
機能とリソースをすぐに利用可能
依存関係の削減
開発を高速化するための依存関係を最小限に
世界中のユーザーからの評価
Syncfusion JavaScript Scheduler リソース
受賞歴
偉大さ—自分で言うのではなく、他の人が認めるからこそ意味があります。 シンクフュージョンは以下の賞をいただきました。
JavaScript Scheduler のブログの最近のアクティビティ
JavaScript Scheduler のブログ投稿は、JavaScript コントロールで最初のアプリを構築するのに役立ちます。これらは問題解決戦略を提供し、機能と機能性を説明し、新機能のリリースを発表し、ベストプラクティスを説明し、例のシナリオを紹介します。JavaScript Scheduler の更新については、ブログチャンネルの最新の投稿をご覧ください。
