Buy now Log in
English
Espanol Deutsch
MindFusion menu
  • Products
    • Suites
      • JavaScript
      • WinForms
      • WPF
      • .NET MAUI
      • Java
      • Diagramming
      • Scheduling
    • JavaScript
      • Diagram
      • Scheduler
      • Chart
      • Data Grid
      • Keyboard
      • Free JS Chart
    • ASP.NET MVC
      • Diagram
    • Blazor
      • Diagram
      • Chart
    • Java
      • Diagram
      • Scheduler
      • Chart
      • Spreadsheet
      • Keyboard
    • WinForms
      • Diagram
      • Scheduler
      • Spreadsheet
      • Chart & Gauge
      • Report
      • Map
      • Virtual Keyboard
      • Dock Control
    • WPF
      • Diagram
      • Scheduler
      • Gantt Chart
      • Spreadsheet
      • Chart & Gauge
      • Report
      • Map
      • Virtual Keyboard
      • UI
    • ActiveX
      • Diagram
    • .NET MAUI
      • Diagram
      • Scheduler
      • Chart
    • Android
      • Diagram
      • Chart
    • iOS
      • Diagram
    • WinUI
      • Diagram
    • WordPress
      • Org Chart Plugin
    • Applications
      • XML Viewer
      • InSight Diagrammer
  • Support
    • Forums
    • Documentation
    • FAQ
    • Help Desk
  • Company
    • About Us
    • Contacts
    • Blog
    • Newsletter
    • Services
    • Clients
    • Testimonials
    • Join Us
  • Downloads
  • Web Store
HomeProductsScheduling for Javascript
OverviewSamplesHelpBuy

FirstSchedule

The basics in a nutshell: how to customize the calendar, handle events and create your own CSS theme. Also: how to save and load to/from a Json file.

Basic Steps to Customize, Serialize and Style a Schedule in JavaScript
Run Download

Advent Calendar

An interactive monthly calendar with custom Christmas theme that displays a witty joke for programmers when a day-cell is clicked.

An Interactive Advent Calendar
Run Download

Bookings

Create and edit reservations for the four rooms defined as locations for the schedule. This sample presents a filtered MonthRange view. Only one appointment can be created for a day period and location. The calendar's appearance is customized by setting various properties and additional css styles.

JavaScript Scheduler: Bookings Calendar
Run Download

DualView

A timetable and a monthly calendar are synchronized to show the same schedule. Use the timetable to the left to create appointments and they will show in the respective days of the month in the calendar to the right.

Interactive Timetable and a Monthly Calendar
Run Download

Garden Calendar

A 12-month garden calendar is presented in a horizontal list view, grouped by resources, where each resource represents a different crop. Schedule items are created automatically upon selection and are bound to the specified task. The calendar's appearance is customized by setting various properties and additional css styles.

JavaScript Calendar Library: Garden Plants
Run Download

Holidays

The schedule, which reads its data from a public api that exposes Roman Catholic liturgical calendar celebrations for a specified month. The sample also shows how to set-up and use a custom form to create and edit schedule items.

JavaScript Calendar with Holidays Data Loaded from a File
Run Download

Items

Learn how to create and customize calendar items. The items can be associated with resources, contacts, a location and a task.

Js Calendar with Items
Run Download

ListView

The list view displays a number of cells that represents a given time interval - second, minute, hour, day, week, month or year - as you choose. The layout can be horizontal or vertical. The cells can be grouped by location, task, contact or resource.

A List with Appointments and Dates in JavaScript
Run Download

MinApp

The minimal application demonstrates the very few basics things you should do to render an interactive schedule on your web page. You can use the UI controls at the top to test the themes and views of the calendar.

A Basic Calendar in JavaScript
Run Download

MonthView

Js Scheduler offers two monthly view - for a single month and ranges of months, where the number of months to render are custom-set. There is also a number of settings that let you refine how your schedule looks.

A Monthly Calendar in JavaScript
Run Download

Resource Scheduler

The sample shows how to build a resource table with the company departments to the left. The cells that correspond to work hours are with different background.

A Resource Table in JavaScript
Run Download

Resources

Use the grouping and filtering capabilities of the scheduler to organize the appointments based on contacts or locations. Change the views to experiment how grouping and filters work in each scenario.

JavaScript Scheduling Library: Filter and Group Items
Run Download

ResourceView

The view displays the distribution of items over a period of time for a particular contacts, locations, tasks or resources. The view displays a single row for each individual contact, location, task or resource and up to three timelines.

Resources Table in JavaScript
Run Download

Serializing Appointments Using XAMPP

Serializing items created in the ListView of the calendar in a MySQL database using a PHP server script and XAMPP.

Serialization in ListView using XAMPP
Run Download

Ski School Scheduler

A timetable for scheduling ski classes for a ski school. The sample features a custom appointment form and filtering.

JavaScript Schedule Library: Ski Classes Timetable
Run Download

Timetable

The view displays one or more days, divided in arbitrary time intervals. You can render the timetables of several days at once. Cells can be grouped by location, task, contact or resource.

Appointments Timetable in JavaScript
Run Download

Timetable Filtering

This timetable uses the gray theme and CSS for additional styling. The two select controls allow multiple options and you can filter the items based on teacher(s) or room(s).

Filtering of Contacts and Locations in a JavaScript Timetable
Run Download

Views

The sample changes various calendar views to achieve a "drill-down" effect e.g. to render different levels of detail in a single Calendar object. You can change among a daily timetable, a monthly calendar and a range of months.

Different Calendar Views in the Js Scheduler
Run Download

WeekView

The view displays a range o weeks that can be rendered in two styles. The first one renders a week on each row, the second one renders only a single week whose days are divided into two columns.

JavaScript Scheduler: Weekly Calendar
Run Download

Pack for JavaScript

  • Diagramming
  • Charting
  • Scheduling
  • Grid
  • Mapping
  • UI
  • Data Grid

    News

  • Build an area chart in JavaScript with a cross hair marker that is implemented as a custom renderer class derived from Renderer2D.

    May 21st, 2025

  • Read the new tutorial how yo show marker lines on top of an area chart, which could be used to emphasize important or border values like dates on a timeline.

    May 12th, 2025

  • The new video tutorial explains in details how to build a devops flowchart from scratch with Mindfusion Diagramming for JavaScript

    May 5th, 2025

    Components

  • JavaScript
  • WinForms Pack
  • WPF Pack
  • .NET MAUI Pack
  • Java
  • Diagramming Pack
  • Scheduling Pack

    Get Products

  • Direct Downloads
  • License Scheme
  • XML Viewer

    Get Support

  • Forum
  • E-mail
  • Online Documentation
  • FAQ
  • Help Desk

    Company

  • Clients
  • Testimonials
  • About Us
  • Services
  • Contacts
  • Online Store
  • Blog
  • News Feed
  • Newsletter
  • E-mail: info@mindfusion.eu
    Phone: +359 889 199 729
    Fax: +359 2 931 54 38

Terms of Use Site Map Contact Us
Copyright © 2001-2018 MindFusion LLC. All rights reserved.