react-native-bigger-calendar 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bigger-calendar",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A generic, themeable month/week/day calendar for React Native with pinch-to-zoom, virtualized paging, and a render-prop event API.",
   "keywords": [
     "react-native",

package/src/components/Agenda.tsx

@@ -0,0 +1,125 @@
+import { LegendList, type LegendListRenderItemProps } from '@legendapp/list/react-native';
+import { format, isSameDay, type Locale, startOfDay } from 'date-fns';
+import { type ComponentType, useCallback, useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useCalendarTheme } from '../theme';
+import type { CalendarEvent, EventKeyExtractor, RenderEvent } from '../types';
+import { getIsToday } from '../utils/dates';
+
+export type AgendaProps<T> = {
+  events: CalendarEvent<T>[];
+  locale?: Locale;
+  renderEvent: RenderEvent<T>;
+  keyExtractor: EventKeyExtractor<T>;
+  onPressEvent: (event: CalendarEvent<T>) => void;
+  onLongPressEvent?: (event: CalendarEvent<T>) => void;
+  onPressDay?: (date: Date) => void;
+  /** Highlight this date's header instead of the real "today". */
+  activeDate?: Date;
+  /** Drawn between rows of the agenda list. */
+  itemSeparatorComponent?: ComponentType<unknown> | null;
+};
+
+type Row<T> =
+  | { kind: 'header'; date: Date; key: string }
+  | { kind: 'event'; event: CalendarEvent<T>; index: number; key: string };
+
+/**
+ * A vertical, day-grouped list of events (no time grid). Events are sorted by
+ * start, grouped under a date header per day. The consumer controls which
+ * events (and therefore which date range) are shown.
+ */
+export function Agenda<T>({
+  events,
+  locale,
+  renderEvent,
+  keyExtractor,
+  onPressEvent,
+  onLongPressEvent,
+  onPressDay,
+  activeDate,
+  itemSeparatorComponent,
+}: AgendaProps<T>) {
+  const theme = useCalendarTheme();
+  const RenderEventComponent = renderEvent;
+
+  const rows = useMemo<Row<T>[]>(() => {
+    const sorted = [...events].sort((a, b) => a.start.getTime() - b.start.getTime());
+    const out: Row<T>[] = [];
+    let currentDay: Date | null = null;
+    sorted.forEach((event, index) => {
+      if (!currentDay || !isSameDay(event.start, currentDay)) {
+        currentDay = startOfDay(event.start);
+        out.push({ kind: 'header', date: currentDay, key: `h-${currentDay.toISOString()}` });
+      }
+      out.push({ kind: 'event', event, index, key: `e-${keyExtractor(event, index)}` });
+    });
+    return out;
+  }, [events, keyExtractor]);
+
+  const keyExtractorRow = useCallback((row: Row<T>) => row.key, []);
+  const renderItem = useCallback(
+    ({ item }: LegendListRenderItemProps<Row<T>>) => {
+      if (item.kind === 'header') {
+        const isHighlighted = activeDate
+          ? isSameDay(item.date, activeDate)
+          : getIsToday(item.date);
+        return (
+          <Text
+            style={[
+              theme.text.weekday,
+              styles.header,
+              { color: isHighlighted ? theme.colors.todayBackground : theme.colors.textMuted },
+            ]}
+            onPress={onPressDay ? () => onPressDay(item.date) : undefined}
+            accessibilityRole={onPressDay ? 'button' : 'header'}
+          >
+            {format(item.date, 'EEEE, d LLLL', { locale })}
+          </Text>
+        );
+      }
+      return (
+        <View style={styles.eventRow}>
+          <RenderEventComponent
+            event={item.event}
+            mode="schedule"
+            onPress={() => onPressEvent(item.event)}
+            onLongPress={onLongPressEvent ? () => onLongPressEvent(item.event) : undefined}
+          />
+        </View>
+      );
+    },
+    [theme, locale, activeDate, onPressDay, onPressEvent, onLongPressEvent, RenderEventComponent],
+  );
+
+  return (
+    <LegendList
+      style={styles.list}
+      data={rows}
+      keyExtractor={keyExtractorRow}
+      renderItem={renderItem}
+      // The public prop is data-agnostic; LegendList types the separator by row.
+      ItemSeparatorComponent={
+        (itemSeparatorComponent ?? undefined) as
+          | ComponentType<{ leadingItem: Row<T> }>
+          | undefined
+      }
+      recycleItems={false}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  list: {
+    flex: 1,
+  },
+  header: {
+    paddingTop: 12,
+    paddingBottom: 4,
+    paddingHorizontal: 12,
+  },
+  eventRow: {
+    paddingHorizontal: 12,
+    paddingVertical: 2,
+  },
+});

package/src/components/AllDayLane.tsx

@@ -0,0 +1,83 @@
+import { addDays, startOfDay } from 'date-fns';
+import { StyleSheet, View } from 'react-native';
+import { useCalendarTheme } from '../theme';
+import type { CalendarEvent, CalendarMode, EventKeyExtractor, RenderEvent } from '../types';
+import { isAllDayEvent } from '../utils/layout';
+
+type AllDayLaneProps<T> = {
+  days: Date[];
+  events: CalendarEvent<T>[];
+  mode: CalendarMode;
+  hourColumnWidth: number;
+  dayWidth: number;
+  renderEvent: RenderEvent<T>;
+  keyExtractor: EventKeyExtractor<T>;
+  onPressEvent: (event: CalendarEvent<T>) => void;
+  onLongPressEvent?: (event: CalendarEvent<T>) => void;
+};
+
+/**
+ * The all-day lane that sits above the scrolling time grid. All-day events are
+ * excluded from the timed columns (see `layoutDayEvents`) and shown here,
+ * stacked under their day(s). Renders nothing when no day has an all-day event,
+ * so timed-only calendars are unaffected.
+ */
+export function AllDayLane<T>({
+  days,
+  events,
+  mode,
+  hourColumnWidth,
+  dayWidth,
+  renderEvent,
+  keyExtractor,
+  onPressEvent,
+  onLongPressEvent,
+}: AllDayLaneProps<T>) {
+  const theme = useCalendarTheme();
+  const RenderEventComponent = renderEvent;
+
+  const allDay = events.filter(isAllDayEvent);
+  const perDay = days.map((day) => {
+    const start = startOfDay(day);
+    const next = addDays(start, 1);
+    return allDay.filter((event) => event.start < next && event.end > start);
+  });
+
+  if (perDay.every((list) => list.length === 0)) return null;
+
+  return (
+    <View style={[styles.lane, { borderBottomColor: theme.colors.gridLine }]}>
+      <View style={{ width: hourColumnWidth }} />
+      {days.map((day, dayIndex) => (
+        <View key={day.toISOString()} style={[styles.column, { width: dayWidth }]}>
+          {perDay[dayIndex].map((event, index) => (
+            <View key={keyExtractor(event, index)} style={styles.chip}>
+              <RenderEventComponent
+                event={event}
+                mode={mode}
+                isAllDay
+                onPress={() => onPressEvent(event)}
+                onLongPress={onLongPressEvent ? () => onLongPressEvent(event) : undefined}
+              />
+            </View>
+          ))}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  lane: {
+    flexDirection: 'row',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    paddingBottom: 2,
+  },
+  column: {
+    paddingHorizontal: 1,
+    gap: 2,
+  },
+  chip: {
+    minHeight: 18,
+  },
+});

package/src/components/Calendar.tsx

@@ -1,4 +1,14 @@
-import { useMemo } from 'react';
+import {
+  endOfDay,
+  endOfMonth,
+  endOfWeek,
+  type Locale,
+  startOfDay,
+  startOfMonth,
+  startOfWeek,
+} from 'date-fns';
+import { useCallback, useMemo } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import { useSharedValue } from 'react-native-reanimated';
 import { CalendarThemeProvider, mergeTheme, type PartialCalendarTheme } from '../theme';
 import type {
@@ -6,30 +16,65 @@ import type {
   CalendarMode,
   EventKeyExtractor,
   RenderEvent,
+  RenderEventArgs,
   WeekStartsOn,
 } from '../types';
+import { getViewDays } from '../utils/dates';
+import { Agenda } from './Agenda';
 import { DefaultEvent } from './DefaultEvent';
 import { MonthPager } from './MonthPager';
-import { DEFAULT_HOUR_HEIGHT, TimeGrid } from './TimeGrid';
+import { DEFAULT_HOUR_HEIGHT, type HourRenderer, TimeGrid } from './TimeGrid';
 
 export type CalendarProps<T> = {
   events: CalendarEvent<T>[];
   mode: CalendarMode;
   date: Date;
   onChangeDate: (date: Date) => void;
+  /** Fired alongside `onChangeDate` with the `[start, end]` of the newly-visible range. */
+  onChangeDateRange?: (range: [Date, Date]) => void;
   onPressEvent: (event: CalendarEvent<T>) => void;
+  /** Long-press an event (month/week/day). */
+  onLongPressEvent?: (event: CalendarEvent<T>) => void;
   /** Tap a day cell (month mode) — e.g. drill into the day view. */
   onPressDay?: (date: Date) => void;
+  /** Long-press a day cell (month mode). */
+  onLongPressDay?: (date: Date) => void;
   /** Tap the "+N more" overflow label in a month cell. */
   onPressMore?: (events: CalendarEvent<T>[], date: Date) => void;
   /** Tap empty space on the week/day grid; receives the date+time pressed. */
   onPressCell?: (date: Date) => void;
+  /** After an empty-cell press, snap the pager back to the active page. Default false. */
+  resetPageOnPressCell?: boolean;
+  /** Long-press empty space on the week/day grid; receives the date+time. */
+  onLongPressCell?: (date: Date) => void;
+  /** Tap a day's column header on the week/day grid (default header only). */
+  onPressDateHeader?: (date: Date) => void;
   /** Max events shown per month cell before they collapse into "+N more". */
   maxVisibleEventCount?: number;
+  /** Sort each month day's events by start. Default true. */
+  sortedMonthView?: boolean;
+  /** Month overflow label template; `{moreCount}` is replaced. Default "{moreCount} More". */
+  moreLabel?: string;
+  /** Show dimmed adjacent-month days in the month grid. Default true. */
+  showAdjacentMonths?: boolean;
+  /** Ignore taps on month-cell events (day taps still fire). Default false. */
+  disableMonthEventCellPress?: boolean;
   /** First day of the week. Sunday = 0 (default) … Saturday = 6. */
   weekStartsOn?: WeekStartsOn;
+  /** Number of day columns when `mode="custom"`. Ignored by other modes. Default 1. */
+  numberOfDays?: number;
+  /**
+   * Last weekday of a `custom` partial-week view (0–6). When set, `custom` shows
+   * `weekStartsOn`…`weekEndsOn` of the visible week and pages by week, taking
+   * precedence over `numberOfDays`. Ignored by other modes.
+   */
+  weekEndsOn?: WeekStartsOn;
   /** Replace the built-in event box. Return a `flex: 1` element. */
   renderEvent?: RenderEvent<T>;
+  /** Per-event style merged onto the built-in event box (static or a function of the event). */
+  eventCellStyle?: StyleProp<ViewStyle> | ((event: CalendarEvent<T>) => StyleProp<ViewStyle>);
+  /** Per-date style for month cells and week/day columns (e.g. shade specific dates). */
+  calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>;
   /** Stable key per event. Defaults to start-time + index. */
   keyExtractor?: EventKeyExtractor<T>;
   /** Partial theme merged over the defaults. */
@@ -41,18 +86,49 @@ export type CalendarProps<T> = {
   minHourHeight?: number;
   maxHourHeight?: number;
   hourColumnWidth?: number;
+  /** Hide the left hour-axis column on the week/day grid. Default false. */
+  hideHours?: boolean;
+  /** Sub-hour divider lines per hour on the week/day grid (e.g. 2 = half-hours). Default 1. */
+  timeslots?: number;
+  /** Show the ISO week number in the week/day header gutter. Default false. */
+  showWeekNumber?: boolean;
+  /** Prefix for the week-number label (e.g. "W"). Default "W". */
+  weekNumberPrefix?: string;
+  /** Replace the hour-axis label on the week/day grid. Receives the hour (0–23) and `ampm`. */
+  hourComponent?: HourRenderer;
+  /** Always render six week rows in month view, for a fixed-height grid. Default false. */
+  showSixWeeks?: boolean;
+  /** Allow swiping between pages (all modes). Default true. */
+  swipeEnabled?: boolean;
+  /** Show the vertical scroll indicator on the week/day grid. Default true. */
+  showVerticalScrollIndicator?: boolean;
+  /** Allow vertical scrolling of the week/day grid. Default true. */
+  verticalScrollEnabled?: boolean;
+  /** Element rendered between the day header and the week/day grid. */
+  headerComponent?: React.ReactNode;
   /** First hour shown on the week/day grid (0–23). Default 0. */
   minHour?: number;
   /** Last hour shown on the week/day grid, exclusive (1–24). Default 24. */
   maxHour?: number;
-  /** Show hour labels in 12-hour AM/PM form. Default false (24h). */
+  /** Show hour labels (and built-in event times) in 12-hour AM/PM form. Default false (24h). */
   ampm?: boolean;
+  /** Show the time range in the built-in event renderer (day/week/schedule). Default true. */
+  showTime?: boolean;
   /** Initial vertical scroll, in minutes from midnight (week/day). */
   scrollOffsetMinutes?: number;
   /** Show the current-time line on the week/day grid. Default true. */
   showNowIndicator?: boolean;
-  /** BCP-47 locale for weekday labels. Defaults to the device locale. */
-  locale?: string;
+  /** A date-fns `Locale` for weekday/date labels. Defaults to English. */
+  locale?: Locale;
+  /** Highlight this date (header/cell/agenda) instead of the real "today". */
+  activeDate?: Date;
+  /**
+   * Lay the day columns out right-to-left (month, week/day grid and all-day lane).
+   * Cosmetic only: the hour gutter stays on the left and paging still advances
+   * with the system scroll direction. Default false. For full RTL (including
+   * scroll direction), also enable React Native's `I18nManager`.
+   */
+  isRTL?: boolean;
   /**
    * Allow a fling to carry across several pages before snapping. Default false:
    * one day/week/month per swipe.
@@ -60,6 +136,10 @@ export type CalendarProps<T> = {
   freeSwipe?: boolean;
   /** Custom header above the week/day grid. Receives the visible days. */
   renderTimeGridHeader?: (days: Date[]) => React.ReactNode;
+  /** Replace the weekday-label header above the month grid. Return `null` to hide it. */
+  renderHeaderForMonthView?: (weekDays: Date[]) => React.ReactNode;
+  /** Drawn between rows of the `schedule` (agenda) list. */
+  itemSeparatorComponent?: React.ComponentType<unknown> | null;
 };
 
 // Derive a key purely from event data so identity is stable across reorders and
@@ -68,18 +148,51 @@ export type CalendarProps<T> = {
 const defaultKeyExtractor: EventKeyExtractor<unknown> = (event) =>
   `${event.start.toISOString()}|${event.end.toISOString()}|${event.title ?? ''}`;
 
+// The [start, end] of the dates a given mode shows around `date`. Month spans the
+// padded grid (whole weeks); time-grid modes span their day columns.
+function visibleRange(
+  mode: CalendarMode,
+  date: Date,
+  weekStartsOn: WeekStartsOn,
+  numberOfDays: number,
+  weekEndsOn?: WeekStartsOn,
+): [Date, Date] {
+  if (mode === 'month') {
+    return [
+      startOfWeek(startOfMonth(date), { weekStartsOn }),
+      endOfWeek(endOfMonth(date), { weekStartsOn }),
+    ];
+  }
+  const days = getViewDays(mode, date, weekStartsOn, numberOfDays, false, weekEndsOn);
+  return [startOfDay(days[0]), endOfDay(days[days.length - 1])];
+}
+
 export function Calendar<T>({
   events,
   mode,
   date,
   onChangeDate,
+  onChangeDateRange,
   onPressEvent,
+  onLongPressEvent,
   onPressDay,
+  onLongPressDay,
   onPressMore,
   onPressCell,
+  resetPageOnPressCell,
+  onLongPressCell,
+  onPressDateHeader,
   maxVisibleEventCount = 2,
+  sortedMonthView,
+  moreLabel,
+  showAdjacentMonths,
+  disableMonthEventCellPress,
   weekStartsOn = 0,
+  numberOfDays,
+  weekEndsOn,
   renderEvent = DefaultEvent,
+  eventCellStyle,
+  calendarCellStyle,
   keyExtractor = defaultKeyExtractor as EventKeyExtractor<T>,
   theme,
   cellHeight: cellHeightProp,
@@ -87,19 +200,73 @@ export function Calendar<T>({
   minHourHeight,
   maxHourHeight,
   hourColumnWidth,
+  hideHours,
+  timeslots,
+  showWeekNumber,
+  weekNumberPrefix,
+  hourComponent,
+  showSixWeeks,
+  swipeEnabled,
+  showVerticalScrollIndicator,
+  verticalScrollEnabled,
+  headerComponent,
   minHour,
   maxHour,
   ampm,
+  showTime,
   scrollOffsetMinutes,
   showNowIndicator,
   locale,
+  activeDate,
+  isRTL,
   freeSwipe,
   renderTimeGridHeader,
+  renderHeaderForMonthView,
+  itemSeparatorComponent,
 }: CalendarProps<T>) {
   const mergedTheme = useMemo(() => mergeTheme(theme), [theme]);
   const internalCellHeight = useSharedValue(hourHeight);
   const cellHeight = cellHeightProp ?? internalCellHeight;
 
+  // Swallow presses on disabled events once, so every view inherits the guard.
+  const handlePressEvent = useCallback(
+    (event: CalendarEvent<T>) => {
+      if (!event.disabled) onPressEvent(event);
+    },
+    [onPressEvent],
+  );
+  const handleLongPressEvent = useMemo(
+    () =>
+      onLongPressEvent
+        ? (event: CalendarEvent<T>) => {
+            if (!event.disabled) onLongPressEvent(event);
+          }
+        : undefined,
+    [onLongPressEvent],
+  );
+
+  // Echo every date change and, when asked, the full visible range derived from it.
+  const handleChangeDate = useCallback(
+    (next: Date) => {
+      onChangeDate(next);
+      onChangeDateRange?.(visibleRange(mode, next, weekStartsOn, numberOfDays ?? 1, weekEndsOn));
+    },
+    [onChangeDate, onChangeDateRange, mode, weekStartsOn, numberOfDays, weekEndsOn],
+  );
+
+  // Inject `eventCellStyle`, `ampm` and `showTime` into the renderer once, so
+  // every view gets them for free without threading the props through each
+  // component. Skip the wrapper entirely when none are set.
+  const resolvedRenderEvent = useMemo<RenderEvent<T>>(() => {
+    if (eventCellStyle == null && ampm == null && showTime == null) return renderEvent;
+    const Base = renderEvent;
+    return function StyledEvent(props: RenderEventArgs<T>) {
+      const cellStyle =
+        typeof eventCellStyle === 'function' ? eventCellStyle(props.event) : eventCellStyle;
+      return <Base {...props} cellStyle={cellStyle} ampm={ampm} showTime={showTime} />;
+    };
+  }, [renderEvent, eventCellStyle, ampm, showTime]);
+
   return (
     <CalendarThemeProvider value={mergedTheme}>
       {mode === 'month' ? (
@@ -108,26 +275,62 @@ export function Calendar<T>({
           events={events}
           maxVisibleEventCount={maxVisibleEventCount}
           weekStartsOn={weekStartsOn}
-          renderEvent={renderEvent}
+          locale={locale}
+          sortedMonthView={sortedMonthView}
+          moreLabel={moreLabel}
+          showAdjacentMonths={showAdjacentMonths}
+          disableMonthEventCellPress={disableMonthEventCellPress}
+          isRTL={isRTL}
+          showSixWeeks={showSixWeeks}
+          activeDate={activeDate}
+          renderHeaderForMonthView={renderHeaderForMonthView}
+          calendarCellStyle={calendarCellStyle}
+          renderEvent={resolvedRenderEvent}
           keyExtractor={keyExtractor}
           onPressDay={onPressDay}
-          onPressEvent={onPressEvent}
+          onLongPressDay={onLongPressDay}
+          onPressEvent={handlePressEvent}
+          onLongPressEvent={handleLongPressEvent}
           onPressMore={onPressMore}
-          onChangeDate={onChangeDate}
+          onChangeDate={handleChangeDate}
           freeSwipe={freeSwipe}
+          swipeEnabled={swipeEnabled}
+        />
+      ) : mode === 'schedule' ? (
+        <Agenda
+          events={events}
+          locale={locale}
+          renderEvent={resolvedRenderEvent}
+          keyExtractor={keyExtractor}
+          onPressEvent={handlePressEvent}
+          onLongPressEvent={handleLongPressEvent}
+          onPressDay={onPressDay}
+          activeDate={activeDate}
+          itemSeparatorComponent={itemSeparatorComponent}
         />
       ) : (
         <TimeGrid
           mode={mode}
+          numberOfDays={numberOfDays}
+          weekEndsOn={weekEndsOn}
           date={date}
           events={events}
           cellHeight={cellHeight}
           hourHeight={hourHeight}
           weekStartsOn={weekStartsOn}
-          renderEvent={renderEvent}
+          renderEvent={resolvedRenderEvent}
           keyExtractor={keyExtractor}
           scrollOffsetMinutes={scrollOffsetMinutes}
           hourColumnWidth={hourColumnWidth}
+          hideHours={hideHours}
+          timeslots={timeslots}
+          calendarCellStyle={calendarCellStyle}
+          showWeekNumber={showWeekNumber}
+          weekNumberPrefix={weekNumberPrefix}
+          hourComponent={hourComponent}
+          showVerticalScrollIndicator={showVerticalScrollIndicator}
+          verticalScrollEnabled={verticalScrollEnabled}
+          headerComponent={headerComponent}
           minHour={minHour}
           maxHour={maxHour}
           ampm={ampm}
@@ -135,10 +338,17 @@ export function Calendar<T>({
           maxHourHeight={maxHourHeight}
           showNowIndicator={showNowIndicator}
           locale={locale}
+          activeDate={activeDate}
+          isRTL={isRTL}
           freeSwipe={freeSwipe}
-          onPressEvent={onPressEvent}
+          swipeEnabled={swipeEnabled}
+          onPressEvent={handlePressEvent}
+          onLongPressEvent={handleLongPressEvent}
           onPressCell={onPressCell}
-          onChangeDate={onChangeDate}
+          resetPageOnPressCell={resetPageOnPressCell}
+          onLongPressCell={onLongPressCell}
+          onPressDateHeader={onPressDateHeader}
+          onChangeDate={handleChangeDate}
           renderHeader={renderTimeGridHeader}
         />
       )}

package/src/components/DefaultEvent.tsx

@@ -8,14 +8,30 @@ import type { RenderEventArgs } from '../types';
  * and (on the day/week grid) its time range. Pass your own `renderEvent` to
  * `<Calendar>` to replace it entirely.
  */
-export function DefaultEvent<T>({ event, mode, onPress }: RenderEventArgs<T>) {
+export function DefaultEvent<T>({
+  event,
+  mode,
+  isAllDay,
+  ampm = false,
+  showTime = true,
+  cellStyle,
+  onPress,
+  onLongPress,
+}: RenderEventArgs<T>) {
   const theme = useCalendarTheme();
-  const showTime = mode !== 'month';
+  const timeFormat = ampm ? 'h:mm a' : 'HH:mm';
+  const shouldShowTime = mode !== 'month' && !isAllDay && showTime;
 
   return (
     <TouchableOpacity
-      style={[styles.box, { backgroundColor: theme.colors.eventBackground }]}
+      style={[
+        styles.box,
+        { backgroundColor: theme.colors.eventBackground },
+        event.disabled && styles.disabled,
+        cellStyle,
+      ]}
       onPress={onPress}
+      onLongPress={onLongPress}
       activeOpacity={0.7}
       accessibilityRole="button"
       accessibilityLabel={event.title}
@@ -30,13 +46,13 @@ export function DefaultEvent<T>({ event, mode, onPress }: RenderEventArgs<T>) {
           {event.title}
         </Text>
       ) : null}
-      {showTime ? (
+      {shouldShowTime ? (
         <Text
           style={[styles.time, { color: theme.colors.eventText }]}
           numberOfLines={1}
           allowFontScaling={false}
         >
-          {`${format(event.start, 'HH:mm')} - ${format(event.end, 'HH:mm')}`}
+          {`${format(event.start, timeFormat)} - ${format(event.end, timeFormat)}`}
         </Text>
       ) : null}
     </TouchableOpacity>
@@ -54,4 +70,7 @@ const styles = StyleSheet.create({
   time: {
     fontSize: 11,
   },
+  disabled: {
+    opacity: 0.5,
+  },
 });