Custom Views via JS

FullCalendar provides an API for building custom views from scratch in JavaScript. It is meant for advanced developers, and offers the unlimited flexibility of JavaScript code.

Config Object#

You can define a view’s “config object” with functions that execute rendering. Example:

import { sliceEvents } from "fullcalendar";

const CustomViewConfig = {
  className: "custom-view-class-name",

  content: function (props) {
    const segs = sliceEvents(props, true); // allDay=true
    const html =
      '<div class="view-title">' +
      props.dateProfile.currentRange.start.toUTCString() +
      "</div>" +
      '<div class="view-events">' +
      segs.length +
      " events" +
      "</div>";

    return { html: html };
  },

  didMount: function (props) {
    console.log("custom view now loaded");
  },

  willUnmount: function (props) {
    console.log("about to change away from custom view");
  },
};

const calendarEl = document.getElementById("calendar");
const calendar = new Calendar(calendarEl, {
  initialView: "custom",
  views: {
    custom: CustomViewConfig
  }
});

The config object accepts these properties:

• content - a Content Injection Input that renders the view.
• class/className - a ClassName Input for the view’s root element.
• didMount - called right after the view has been added to the DOM.
• willUnmount - called right before the view will be removed from the DOM.

View a runnable demo

Component#

It is also possible to specify a Preact Component. Here’s an example that uses JSX:

import { sliceEvents } from "fullcalendar";
import { h, Component, Fragment } from "fullcalendar/preact";

class CustomView extends Component {
  render(props) {
    const segs = sliceEvents(props, true); // allDay=true

    return (
      <Fragment>
        <div class="view-title">
          {props.dateProfile.currentRange.start.toUTCString()}
        </div>
        <div class="view-events">{segs.length} events</div>
      </Fragment>
    );
  }
}

const calendarEl = document.getElementById("calendar");
const calendar = new Calendar(calendarEl, {
  initialView: "custom",
  views: {
    custom: CustomViewConfig
  }
});

If you’re using the React implementation you can specify a React component instead.

Props#

Both the config and component techniques receive “props”, an object with information about the current view. You’ll need to look at ViewProps in the FullCalendar source code to see exactly what’s in props.

Other Considerations#

The above documentation is helpful for building a barebones view, but making it full-featured and interactive is a further challenge. A robust view should be right-to-left compatible, locale-customizable, allow event dragging and resizing, allow user selections, and more…

Making a full-featured view is beyond the scope of this document. Further documentation should be written and further APIs should be formalized, but for now, it would be best to browse FullCalendar’s source on GitHub.