Available methods

React Native Calendar Kit provides several methods that you can use to programmatically control the calendar. These methods are accessible through a ref attached to the CalendarKit component.

Accessing Methods

To use these methods, first create a ref and attach it to the CalendarKit component:

import React, { useRef } from 'react';
import { CalendarKit } from '@howljs/calendar-kit';

function MyCalendar() {
  const calendarRef = useRef(null);

  return <CalendarKit ref={calendarRef} />;
}

Now you can call methods on calendarRef.current.

Available Methods

goToDate

Navigates to a specific date and optionally scrolls to a specific hour.

Parameters:

• options: An object with the following properties:
  • date (optional): The date to navigate to (string in ISO format, Date object, or number as Unix timestamp). Default is current date.
  • animatedDate (optional): Whether to animate the date change (boolean, default: true)
  • hourScroll (optional): Whether to scroll to the hour of the specified date (boolean, default: false)
  • animatedHour (optional): Whether to animate the hour scroll (boolean, default: true)

Example:

calendarRef.current?.goToDate({
  date: new Date().toISOString(),
  animatedDate: true,
  hourScroll: true,
  animatedHour: true
});

goToHour

Scrolls to a specific hour.

Parameters:

• hour: The hour to scroll to (number, 0-23)
• animated (optional): Whether to animate the scroll (boolean, default: true)

Example:

calendarRef.current?.goToHour(14, false); // Scroll to 2 PM without animation

goToNextPage

Navigates to the next page of the calendar.

Parameters:

• animated (optional): Whether to animate the transition (boolean, default: true)
• forceScrollByDay (optional): Force scroll by day even if the calendar is in week view (boolean, default: false)

Example:

calendarRef.current?.goToNextPage(true);

goToPrevPage

Navigates to the previous page of the calendar.

Parameters:

• animated (optional): Whether to animate the transition (boolean, default: true)
• forceScrollByDay (optional): Force scroll by day even if the calendar is in week view (boolean, default: false)

Example:

calendarRef.current?.goToPrevPage(true, false);

zoom

Zooms the calendar in or out.

Parameters:

• options (optional): An object with one of the following properties:
  • scale: The scale factor to zoom by
  • height: The new height for time intervals

Example:

calendarRef.current?.zoom({ scale: 1.5 }); // Zoom in by 1.5x
calendarRef.current?.zoom({ height: 80 }); // Set time interval height to 80

setVisibleDate

Sets the visible date of the calendar.

Parameters:

• date: The date to set as visible (string in ISO format, Date object, or number as Unix timestamp)

Example:

calendarRef.current?.setVisibleDate('2024-03-15');

This method is useful when you want to change mode from week to day, default in week view the visible date is the first day of the week, so when you change to day view, the calendar will scroll to the first day of the week, use this method before changing the mode to day view to set the correct visible date.

Example: Press day number on week view to change to day view, if you want to scroll to the date of the pressed day number, you can use this method.

const _onPressDayNumber = (date: string) => {
  calendarRef.current?.setVisibleDate(date);
  setNumberOfDays(1);
};

getDateByOffset

Gets the date at a specific offset in the calendar.

Parameters:

• position: An object with x and y coordinates

Returns: A string representing the date at the given offset, or null if not found.

Example:

const date = calendarRef.current?.getDateByOffset({ x: 100, y: 200 });

getEventByOffset

Gets the event at a specific offset in the calendar.

Parameters:

• position: An object with x and y coordinates

Returns: An event object at the given offset, or null if not found.

Example:

const event = calendarRef.current?.getEventByOffset({ x: 100, y: 200 });

getSizeByDuration

Gets the size (width and height) for an event of a specific duration.

Parameters:

• duration: The duration of the event in minutes

Returns: An object with width and height properties.

Example:

const size = calendarRef.current?.getSizeByDuration(60); // Size for a 1-hour event

getVisibleStart

Gets the start date and time of the currently visible calendar area.

Returns: A string representing the start date and time of the visible area.

Example:

const visibleStart = calendarRef.current?.getVisibleStart();

getCurrentOffsetY

Gets the current Y offset of the calendar scroll view.

Returns: A number representing the current Y offset.

Example:

const offsetY = calendarRef.current?.getCurrentOffsetY();

Resource Navigation Methods

The following methods are available when using resources calendar with enableResourceScroll={true}:

goToResource

Navigates to a specific resource by its ID.

Parameters:

• options: An object with the following properties:
  • resourceId: The ID of the resource to navigate to (string)
  • animated (optional): Whether to animate the transition (boolean, default: true)

Example:

calendarRef.current?.goToResource({ 
  resourceId: 'room1', 
  animated: true 
});

goToNextResource

Navigates to the next resource or page of resources.

Parameters:

• animated (optional): Whether to animate the transition (boolean, default: true)
• scrollType (optional): Type of scroll behavior:
  • 'resource': Scroll by individual resource
  • 'page': Scroll by page (respects resourcePerPage setting)

Example:

// Scroll to next individual resource
calendarRef.current?.goToNextResource(true, 'resource');

// Scroll to next page of resources
calendarRef.current?.goToNextResource(true, 'page');

goToPrevResource

Navigates to the previous resource or page of resources.

Parameters:

• animated (optional): Whether to animate the transition (boolean, default: true)
• scrollType (optional): Type of scroll behavior:
  • 'resource': Scroll by individual resource
  • 'page': Scroll by page (respects resourcePerPage setting)

Example:

// Scroll to previous individual resource
calendarRef.current?.goToPrevResource(true, 'resource');

// Scroll to previous page of resources
calendarRef.current?.goToPrevResource(true, 'page');

Method Limitations

Resource Mode Limitations

When using enableResourceScroll={true}, the following methods have limited functionality:

• getDateByOffset: Not supported in resource scroll mode
• getEventByOffset: May have different behavior in resource mode

Always check if your calendar is in resource mode before using these methods.