reactjs - How to handle resource allocation dynamically based on day, week, and month views in FullCalendar? - Stack Overflow

admin管理员组

文章数量:1130349

I'm using FullCalendar with the resourceTimeline plugin in a React project to manage resources (e.g., rooms, employees). I want to dynamically adjust resource availability and event rendering based on the selected calendar view (day, week, or month).

1. Day View: Show all resources and detailed hourly events.
2. Week View: Show a limited number of resources with aggregated event summaries.
3. Month View: Show only high-level resource availability (e.g., "Available" or "Booked").

import FullCalendar from '@fullcalendar/react';
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
import interactionPlugin from '@fullcalendar/interaction';
import { useState } from 'react';

const MyResourceCalendar = () => {
  const [currentView, setCurrentView] = useState('resourceTimelineDay');

  const resourcesByView = {
    resourceTimelineDay: [
      { id: '1', title: 'Room A' },
      { id: '2', title: 'Room B' },
      { id: '3', title: 'Room C' },
    ],
    resourceTimelineWeek: [
      { id: '1', title: 'Room A' },
      { id: '2', title: 'Room B' },
    ],
    resourceTimelineMonth: [
      { id: '1', title: 'All Rooms' },
    ],
  };

  const eventsByView = {
    resourceTimelineDay: [
      { title: 'Meeting', start: '2024-06-01T09:00:00', end: '2024-06-01T10:00:00', resourceId: '1' },
      { title: 'Conference', start: '2024-06-01T12:00:00', end: '2024-06-01T14:00:00', resourceId: '2' },
    ],
    resourceTimelineWeek: [
      { title: 'Team Week Event', start: '2024-06-03', end: '2024-06-07', resourceId: '1' },
    ],
    resourceTimelineMonth: [
      { title: 'Available', start: '2024-06-01', end: '2024-06-30', resourceId: '1' },
    ],
  };

  return (
    <FullCalendar
      plugins={[resourceTimelinePlugin, interactionPlugin]}
      initialView={currentView}
      views={{
        resourceTimelineDay: { buttonText: 'Day' },
        resourceTimelineWeek: { buttonText: 'Week' },
        resourceTimelineMonth: { buttonText: 'Month' },
      }}
      resources={resourcesByView[currentView]}
      events={eventsByView[currentView]}
      datesSet={(dateInfo) => setCurrentView(dateInfo.view.type)}
    />
  );
};

export default MyResourceCalendar;

1. Dynamic Resource Loading:
2. Event Aggregation in Week View:
3. Conditional Resource Display:

I'm using FullCalendar with the resourceTimeline plugin in a React project to manage resources (e.g., rooms, employees). I want to dynamically adjust resource availability and event rendering based on the selected calendar view (day, week, or month).

1. Day View: Show all resources and detailed hourly events.
2. Week View: Show a limited number of resources with aggregated event summaries.
3. Month View: Show only high-level resource availability (e.g., "Available" or "Booked").

import FullCalendar from '@fullcalendar/react';
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
import interactionPlugin from '@fullcalendar/interaction';
import { useState } from 'react';

const MyResourceCalendar = () => {
  const [currentView, setCurrentView] = useState('resourceTimelineDay');

  const resourcesByView = {
    resourceTimelineDay: [
      { id: '1', title: 'Room A' },
      { id: '2', title: 'Room B' },
      { id: '3', title: 'Room C' },
    ],
    resourceTimelineWeek: [
      { id: '1', title: 'Room A' },
      { id: '2', title: 'Room B' },
    ],
    resourceTimelineMonth: [
      { id: '1', title: 'All Rooms' },
    ],
  };

  const eventsByView = {
    resourceTimelineDay: [
      { title: 'Meeting', start: '2024-06-01T09:00:00', end: '2024-06-01T10:00:00', resourceId: '1' },
      { title: 'Conference', start: '2024-06-01T12:00:00', end: '2024-06-01T14:00:00', resourceId: '2' },
    ],
    resourceTimelineWeek: [
      { title: 'Team Week Event', start: '2024-06-03', end: '2024-06-07', resourceId: '1' },
    ],
    resourceTimelineMonth: [
      { title: 'Available', start: '2024-06-01', end: '2024-06-30', resourceId: '1' },
    ],
  };

  return (
    <FullCalendar
      plugins={[resourceTimelinePlugin, interactionPlugin]}
      initialView={currentView}
      views={{
        resourceTimelineDay: { buttonText: 'Day' },
        resourceTimelineWeek: { buttonText: 'Week' },
        resourceTimelineMonth: { buttonText: 'Month' },
      }}
      resources={resourcesByView[currentView]}
      events={eventsByView[currentView]}
      datesSet={(dateInfo) => setCurrentView(dateInfo.view.type)}
    />
  );
};

export default MyResourceCalendar;

1. Dynamic Resource Loading:
2. Event Aggregation in Week View:
3. Conditional Resource Display:

本文标签：