Mobile

Enable mobile view in the layout to display the mobile view of the timeline.

info

The isVerticalMode, dnd and resize feature have to be disabled to use the mobile features.

Mobile schema

Property	Type	Status	Description
enabled	boolean	required	Enabled the mobile view
controllers	object	required	Object to define the controllers options
sortItems	function	optional	Sort the items in the mobile time slot view

Mobile controllers schema

Property	Type	Status	Description
height	number	required	Height of the controller header
showAllText	string	optional	Text to show all programs
allText	string	optional	Text to show all programs
closeText	string	optional	Text to close the mobile view
showCloseIcon	boolean	optional	Show close icon in the mobile view. When this option is set to true the close text will not be displayed

Example

const { getEpgProps, getLayoutProps } = useEpg({
  channels,
  epg,
  startDate,
  endDate,
  isVerticalMode:false,
  dnd: {
    enabled: false, // The dnd has to be disabled to use the mobile view
  },
  isResize: false,
  mobile: {
      enabled: true,
      // Optional sort option
      // You can sort by any key in the data object
      sortItems: (data) =>
        data.sort((a, b) =>
          // return a sort logic for the data to be displayed in the mobile time slot view
        ),
      controllers: {
        height: 50, // Required
        showAllText: "Show All", // Optional
        allText: "All programs", // Optional
        closeText: "Back", // Optional
        showCloseIcon: true, // Optional when this option is set to true the close text will not be displayed
      },
    },
  ...
});