React simple schedule viewer

📅 An easy configurable react weekly Calendar viewer component.

---

• Full Typescript support
• Dark & Light mode support
• French & English languages support
• Schedule view with three types : 'event', 'temperature' & 'calendar'
• made with react, react-router-dom, tailwindcss
• The global state of the app is managed by recoil
• All errors are catched and rendered a fallback UI with react-error-boundary

---

Quick Links

Pictures demo

Live demo

Install dependency

Install library

API

Usage

• Event type view

• Temp type view

• Calendar type

Contributing

Reporting Issues

Author

Feature Requests

A few words from the author

Support the project

License

My other projects

---

pictures demo

Base design:

The base design of this library is made with taillwindcss

Event type:

French - Light & Dark mode

English - Light & Dark mode

Temperature type:

French - Light & Dark mode

English - Light & Dark mode

Calendar type:

French - Light & Dark mode

English - Light & Dark mode

---

Some cool features:

start & end time indication (only in french for the moment, sorry!)

---

Auto scroll to the first event.

---

custom modal content (only for the 'event' type of schedule).

The normal modal for all other schedule types is:

---

Live demo

To see the live demo: Click here

---

install dependencies

• as react-router-dom is a dependency of the package, you need to install it first as dependencies in your app.

for info:

• react-router-dom npm registry

1yarn add react-router-dom

of course, like all react application wich use react router dom, you need to wrap your App element with a provider into the main.tsx page like that:

1// main.tsx
2  ...
3  <BrowserRouter>
4    <App />
5  </BrowserRouter>
6  ...

• recoil & react-error-boundary are dev dependencies of the package, you need to install it first as dev dependencies in your app.

for info:

• recoil npm registry
• react-error-boundary npm registry

1yarn add -D recoil react-error-boundary

---

install library

npm install react-simple-schedule-viewer

or

yarn add react-simple-schedule-viewer

API

Name	Type	Default	Description
scheduleByEventPlace	Object (required)	{ schedules: [] }	The data object for the schedule.
weekStartsOn	Number (required)	0	The day of the week start
isInDarkMode	Boolean (required)	false	For dark mode support.
colorCellByEvents	Object (required)	{ eventType_1: "", eventType_6: "" }	The colors of the cells.
eventsTextColor	Object (required)	{ eventType_1: "", eventType_6: "" }	the color for the text cells calendar.
locale	String (required)	"fr"	for fr/en support.
eventsNameUs	Object (optional)	{ eventType_1: "", eventType_6: "" }	the events name in us version.
eventsName	Object (optional)	{ eventType_1: "", eventType_6: "" }	the events name in fr version.
eventTypeData	Object (required)	{ eventType_1: "", eventType_6: "" }	The value of each event (prices, degrees, or other infos).
modalContent	Array (optional)	[]	Custom modal content (event type only)
withDays	boolean (optional)	false	display the day of each week days.
withList	Boolean (optional)	false	display a list of the schedules before the calendar view.
withListButtonName	String (optional)	""	when the list is true you can add a french text for the return button
withListButtonNameUs	String (optional)	""	you can add an English text for the button
withListReturnButton	Boolean (optional)	false	when the list is true you can add a return button by setting the value to true

Some precision about options

All options are available in english language too, without intl or i18n...

---

• weekStartsOn :

you can choice the default day of the beginning of the schedule.

---

---

• eventsNameUs & eventsName & modalContent :

These three variables are used only for the 'event' type schedule. for the other types you don't need to implement it.

---

---

• withDays :

That variable display the current month on top & indicate the current day with a red point & a more stronger font size. This option is by default for the calendar type (in this case, it's no need to put this variable to the Schedule props).

---

---

• withList :

This option display a list of your schedules before the calendar view, with a return button logic.

---

---

• withListReturnButton :

This option display a button to return to your home page for example. This option is used when the withList boolean is true.

Example :

1withListReturnButton={true}
2withListButtonName="Retourner à la page d'acceuil"
3withListButtonNameUs="Go to HomePage"

---

:dart: Usage

:heavy_exclamation_mark: important

:heavy_exclamation_mark: the time value expected is only in minutes from 0 to 1440.

:heavy_exclamation_mark: the expected range is by 15 min intervals only

Link to the complete 24h values by 15 mins range

:circus_tent: Event type view

This example is implemented with fake data for easily copy/paste in your project & adding more convenience for understanding the logic.

you can see the example code: here

1// App.tsx
2import { Suspense, useEffect, useState } from "react";
3import "../App.css";
4import { Route, Routes } from "react-router-dom";
5// If you don't have light & dark theme, you can skip this import & set false to isInDarkMode Schedule props 
6import { useTheme } from "../useTheme";
7// All types for the Schedule
8import {
9  TcolorCellByEvents,
10  TeventsTextColor,
11} from "../dataTypes";
12// The content for each event modal
13import { contentForModal } from "./dataCards";
14// Home page example
15import HomePage from "../HomePage";
16// The enum for the event types & all data for the schedule cells
17import { EeventTypes, eventTypeData, scheduleByEventPlace } from "./eventData";
18//Import for the npm registry
19import Schedule from "react-simple-schedule-viewer";
20
21function App() {
22  //  Variables for the Schedule component
23  const weekStartsOn = 0;
24  const { theme, setTheme } = useTheme();
25  const [isDarkMode] = useState(theme === "dark" ? true : false);
26
27  // the default order of background colors in the array is
28  const colorCellByEvents: TcolorCellByEvents = {
29    [EeventTypes.food]: "#FFECC8", // eventType_1 - required
30    [EeventTypes.concert]:"#FFAACF", // eventType_2 - optional
31    [EeventTypes.game_force]: "#BFF6C3", // eventType_3 - optional
32    [EeventTypes.game_dark]: "#CDC1FF", // eventType_4 - optional
33    [EeventTypes.lecture]: "#7BD3EA", // eventType_5 - optional
34    [EeventTypes.closed]: isDarkMode ? "#2D3648" : "#f3f3f3", // eventType_6 - required - is always the away, closed or absent event
35    // eventType_7: "#FFDEFA", // eventType_7 - optional - unused in this example
36  };
37  // the default order of text colors in the array is
38  const eventsTextColor: TeventsTextColor = {
39    [EeventTypes.food]: "#c8a026", // eventType_1 - required
40    [EeventTypes.concert]: "#7b2e7b", // eventType_2 - optional
41    [EeventTypes.game_force]: "#0eb318", // eventType_3 - optional
42    [EeventTypes.game_dark]: "#756AB6", // eventType_4 - optional
43    [EeventTypes.lecture]: "#1e646e", // eventType_5 - optional
44    [EeventTypes.closed]: "#84878a", // eventType_6 - required - is always the away, closed or absent event
45    // eventType_7: "#B97A95", // eventType_7 - optional -- unused in this example
46  };
47
48// Just for the demo
49  useEffect(() => {
50    if (isDarkMode) {
51      setTheme("dark");
52    } else if (!isDarkMode) {
53      setTheme("light");
54    }
55  });
56
57  return (
58    <div className="App">
59      <Routes>
60        <Route path="/" element={<HomePage />} /> 
61        <Route
62          path="/schedule/*" // The path imperatively must be '/schedule/*'
63          element={
64            <Suspense fallback={<div>Loading...</div>}>
65              <Schedule
66                scheduleByEventPlace={scheduleByEventPlace}
67                weekStartsOn={weekStartsOn}
68                isInDarkMode={isDarkMode}
69                colorCellByEvents={colorCellByEvents}
70                eventsTextColor={eventsTextColor}
71                locale={"fr"}
72                eventTypeData={eventTypeData}
73                modalContent={contentForModal}
74                  // If you want to display the number of the day on each day names
75                // withDays={false}
76                  // If you want to display a list with all schedules before the calendar view 
77                // withList={false}
78                  // If you want to display a return button to the list of schedules 
79                // withListReturnButton={true}
80                  // If you display a return button, the french button text 
81                // withListButtonName="Retourner à la page d'acceuil"
82                  // If you display a return button, the english button text 
83                // withListButtonNameUs="Go to HomePage"
84                
85              />
86            </Suspense>
87          }
88        />
89      </Routes>
90    </div>
91  );
92}
93
94export default App;
95

The Typescript types file

• (the same for each type of schedule)

1// dataTypes.ts
2export interface getSchedulesByEventPlaceIdResponse {
3  schedules: {
4    id: string;
5    title: string;
6    type: string;
7    day_slot_set: {
8      days: number[];
9      time_slot: {
10        start: number;
11        instruction: string;
12      }[];
13    }[];
14  }[];
15}
16export type TeventTypeData = {
17  eventPlace_id?: string;
18  eventType_1: string;
19  eventType_2?: string;
20  eventType_3?: string;
21  eventType_4?: string;
22  eventType_5?: string;
23  eventType_6: string;
24  eventType_7?: string;
25};
26export type TcolorCellByEvents = Omit<TeventTypeData, "eventPlace_id">;
27
28export type TeventsTextColor = Omit<TeventTypeData, "eventPlace_id">;
29
30export enum LanguageKeys {
31  en = "en",
32  fr = "fr",
33}
34
35
36export type TeventsName = {
37  eventType_1: string;
38  eventType_2?: string;
39  eventType_3?: string;
40  eventType_4?: string;
41  eventType_5?: string;
42  eventType_6: string;
43  eventType_7?: string;
44}

the data file

1// eventData.ts
2import { getSchedulesByEventPlaceIdResponse, TeventTypeData } from "../../dataTypes";
3
4  //  enum for identidying the event_Type easily
5  export enum EeventTypes {
6    food = "eventType_1",
7    concert = "eventType_2",
8    game_force = "eventType_3",
9    game_dark = "eventType_4",
10    lecture = "eventType_5",
11    closed = "eventType_6", // eventType_6 must be always the away, closed or no activity event
12  }
13  //   Mocked data for example - set the price of each event for example
14  export const eventTypeData: TeventTypeData = {
15    eventPlace_id: "b4514cca-bd0f-4876-a3c3-b77444c047b4", // If you have many places with different prices this id must be unique
16    [EeventTypes.food]: "12.5 Euros",
17    [EeventTypes.concert]: "20 Euros",
18    [EeventTypes.game_force]: "21 Euros",
19    [EeventTypes.game_dark]: "10 Euros",
20    [EeventTypes.lecture]: "6.5 Euros",
21    [EeventTypes.closed]: "pas d'événement",
22  };
23
24  //   Mocked data for example - schedules array with each calendar cells event
25  export const scheduleByEventPlace: getSchedulesByEventPlaceIdResponse = {
26    schedules: [
27      {
28        id: "56a2bd7c-a898-4502-8414-fa4ace79e749", // Unique schedule id identifier
29        title: "Exemple de calendrier de type 'event'", // title of the event
30        type: "event", // type of the event (event - temperature - calendar)
31        day_slot_set: [
32          // each days & time slot instruction, start time only & the type of event (eventType_1 for example)
33          {
34            days: [0], // Monday
35            time_slot: [
36              {
37                start: 0, // start at midnight with closed type event
38                instruction: EeventTypes.closed,
39              },
40              {
41                start: 600, // start at 10:00AM (this is the end of the previous event too)
42                instruction: EeventTypes.lecture,
43              },
44              {
45                start: 720, // start at 12:00AM with food (eventType_1 in this example)
46                instruction: EeventTypes.food,
47              },
48              {
49                start: 900,
50                instruction: EeventTypes.game_dark,
51              },
52              {
53                start: 1230,
54                instruction: EeventTypes.concert,
55              },
56              {
57                start: 1380,
58                instruction: EeventTypes.closed,
59              },
60            ],
61          },
62          {
63            days: [1],
64            time_slot: [
65              {
66                start: 0,
67                instruction: EeventTypes.closed,
68              },
69              {
70                start: 600,
71                instruction: EeventTypes.lecture,
72              },
73              {
74                start: 720,
75                instruction: EeventTypes.food,
76              },
77              {
78                start: 900,
79                instruction: EeventTypes.game_force,
80              },
81              {
82                start: 1020,
83                instruction: EeventTypes.concert,
84              },
85
86              {
87                start: 1380,
88                instruction: EeventTypes.closed,
89              },
90            ],
91          },
92          {
93            days: [2],
94            time_slot: [
95              {
96                start: 0,
97                instruction: EeventTypes.closed,
98              },
99              {
100                start: 495,
101                instruction: EeventTypes.game_dark,
102              },
103              {
104                start: 720,
105                instruction: EeventTypes.food,
106              },
107              {
108                start: 900,
109                instruction: EeventTypes.game_dark,
110              },
111              {
112                start: 1215,
113                instruction: EeventTypes.closed,
114              },
115            ],
116          },
117          {
118            days: [3],
119            time_slot: [
120              {
121                start: 0,
122                instruction: EeventTypes.closed,
123              },
124              {
125                start: 450,
126                instruction: EeventTypes.concert,
127              },
128              {
129                start: 900,
130                instruction: EeventTypes.closed,
131              },
132            ],
133          },
134          {
135            days: [4],
136            time_slot: [
137              {
138                start: 0,
139                instruction: EeventTypes.closed,
140              },
141
142              {
143                start: 480,
144                instruction: EeventTypes.game_force,
145              },
146              {
147                start: 1380,
148                instruction: EeventTypes.closed,
149              },
150            ],
151          },
152          {
153            days: [5],
154            time_slot: [
155              {
156                start: 0,
157                instruction: EeventTypes.closed,
158              },
159              {
160                start: 450,
161                instruction: EeventTypes.game_dark,
162              },
163              {
164                start: 1020,
165                instruction: EeventTypes.closed,
166              },
167            ],
168          },
169          {
170            days: [6],
171            time_slot: [
172              {
173                start: 0,
174                instruction: EeventTypes.closed,
175              },
176            ],
177          },
178        ],
179      },
180      {
181        id: "40f80dba-ab6c-4f71-8a4d-51ce439e9b44",
182        title: "Exemple de calendrier de type 'event' vide",
183        type: "event",
184        day_slot_set: [
185          {
186            days: [0, 1, 2, 3, 4, 5, 6],
187            time_slot: [
188              {
189                start: 0,
190                instruction: EeventTypes.closed,
191              },
192            ],
193          },
194        ],
195      },
196    ],
197  };
198

The contentForModal data

• only for event type

1// dataCards.tsx
2import { Fragment } from "react/jsx-runtime";
3import { EeventTypes } from "./enum";
4
5export const contentForModal = [
6  {
7    id: "56a2bd7c-a898-4502-8414-fa4ace79e749", // The id of the schedule
8    day: 0, // The day of the event
9    eventType: EeventTypes.concert, // The event type - for this example it's the eventType_2 based with the enum name
10    startTime: 1230, // The start time of the event - the end of this event is defined by the next start time event
11    eventTitle: "Englewood Concert", // The title
12    contentModal: ( // This variable get the JSX Element you want, can be card, external component...
13      <Fragment>
14        <h1 style={{ fontWeight: "bold", padding: 10 }}>
15          Event de lundi à 20:30 et réservation
16        </h1>
17        <p>This is the place for the custom element (JSXElement)</p>
18        <p>
19          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta
20          quibusdam delectus esse! Excepturi, omnis sapiente at quo tempora
21          eaque repellendus, a aspernatur impedit reiciendis laborum optio sed
22          quasi cupiditate amet.
23        </p>
24      </Fragment>
25    ),
26  },
27  {
28    id: "56a2bd7c-a898-4502-8414-fa4ace79e749",
29    day: 3,
30    eventType: EeventTypes.concert,
31    startTime: 450,
32    eventTitle: "Englewood Concert",
33    contentModal: (
34      <Fragment>
35        <h1 style={{ fontWeight: "bold", padding: 10 }}>
36          Event de jeudi à 07:30 et réservation
37        </h1>
38        <p style={{marginBottom:"1vh"}}>This is the place for the custom element (JSXElement)</p>
39        <h2 style={{fontWeight:"bold"}}>Text example</h2>
40         <p>
41          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta
42          quibusdam delectus esse! Excepturi, omnis sapiente at quo tempora
43          eaque repellendus, a aspernatur impedit reiciendis laborum optio sed
44          quasi cupiditate amet.
45        </p>
46      </Fragment>
47    ),
48  },
49  {
50    id: "56a2bd7c-a898-4502-8414-fa4ace79e749",
51    day: 1,
52    eventType: EeventTypes.concert,
53    startTime: 1020,
54    eventTitle: "Englewood Concert",
55    contentModal: (
56      <Fragment>
57        <h1 style={{ fontWeight: "bold", padding: 10 }}>
58          Event du mardi à 17h info et réservation
59        </h1>
60        <p>This is the place for the custom element (JSXElement)</p>
61         <h2 style={{fontWeight:"bold"}}>Text example</h2>
62         <p>
63          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta
64          quibusdam delectus esse! Excepturi, omnis sapiente at quo tempora
65          eaque repellendus, a aspernatur impedit reiciendis laborum optio sed
66          quasi cupiditate amet.
67        </p>
68      </Fragment>
69    ),
70  },
71  {
72    id: "56a2bd7c-a898-4502-8414-fa4ace79e749",
73    day: 1,
74    eventType: EeventTypes.game_force,
75    startTime: 900,
76    eventTitle: "Force mage game",
77    contentModal: (
78      <Fragment>
79        <h1 style={{ fontWeight: "bold", padding: 10 }}>
80          Event du mardi à 15h00 info
81        </h1>
82        <p>This is the place for the custom element (JSXElement)</p>
83         <h2 style={{fontWeight:"bold"}}>Text example</h2>
84         <p>
85          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta
86          quibusdam delectus esse! Excepturi, omnis sapiente at quo tempora
87          eaque repellendus, a aspernatur impedit reiciendis laborum optio sed
88          quasi cupiditate amet.
89        </p>
90      </Fragment>
91    ),
92  },
93  {
94    id: "56a2bd7c-a898-4502-8414-fa4ace79e749",
95    day: 4,
96    eventType: EeventTypes.game_force,
97    startTime: 480,
98    eventTitle: "Force mage game",
99    contentModal: (
100      <Fragment>
101        <h1 style={{ fontWeight: "bold", padding: 10 }}>
102          Event du vendredi à 08h00 info
103        </h1>
104        <p>This is the place for the custom element (JSXElement)</p>
105         <h2 style={{fontWeight:"bold"}}>Text example</h2>
106         <p>
107          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta
108          quibusdam delectus esse! Excepturi, omnis sapiente at quo tempora
109          eaque repellendus, a aspernatur impedit reiciendis laborum optio sed
110          quasi cupiditate amet.
111        </p>
112      </Fragment>
113    ),
114  },
115  {
116    id: "56a2bd7c-a898-4502-8414-fa4ace79e749",
117    day: 5,
118    eventType: EeventTypes.game_dark,
119    startTime: 450,
120    eventTitle: "Dark rider game",
121    contentModal: (
122      <Fragment>
123        <h1 style={{ fontWeight: "bold", padding: 10 }}>
124          Event du samedi à 07:30 info
125        </h1>
126        <p>This is the place for the custom element (JSXElement)</p>
127         <h2 style={{fontWeight:"bold"}}>Text example</h2>
128         <p>
129          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta
130          quibusdam delectus esse! Excepturi, omnis sapiente at quo tempora
131          eaque repellendus, a aspernatur impedit reiciendis laborum optio sed
132          quasi cupiditate amet.
133        </p>
134      </Fragment>
135    ),
136  },
137  {
138    id: "56a2bd7c-a898-4502-8414-fa4ace79e749",
139    day: 2,
140    eventType: EeventTypes.game_dark,
141    startTime: 495,
142    eventTitle: "Dark rider game",
143    contentModal: (
144      <Fragment>
145        <h1 style={{ fontWeight: "bold", padding: 10 }}>
146          Event du mercredi à 08:15 info
147        </h1>
148        <p>This is the place for the custom element (JSXElement)</p>
149         <h2 style={{fontWeight:"bold"}}>Text example</h2>
150         <p>
151          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta
152          quibusdam delectus esse! Excepturi, omnis sapiente at quo tempora
153          eaque repellendus, a aspernatur impedit reiciendis laborum optio sed
154          quasi cupiditate amet.
155        </p>
156      </Fragment>
157    ),
158  },
159  {
160    id: "56a2bd7c-a898-4502-8414-fa4ace79e749",
161    day: 2,
162    eventType: EeventTypes.game_dark,
163    startTime: 900,
164    eventTitle: "Dark rider game",
165    contentModal: (
166      <Fragment>
167        <h1 style={{ fontWeight: "bold", padding: 10 }}>
168          Event du mercredi à 15:00 info
169        </h1>
170        <p>This is the place for the custom element (JSXElement)</p>
171         <h2 style={{fontWeight:"bold"}}>Text example</h2>
172         <p>
173          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta
174          quibusdam delectus esse! Excepturi, omnis sapiente at quo tempora
175          eaque repellendus, a aspernatur impedit reiciendis laborum optio sed
176          quasi cupiditate amet.
177        </p>
178      </Fragment>
179    ),
180  },
181  {
182    id: "56a2bd7c-a898-4502-8414-fa4ace79e749",
183    day: 0,
184    eventType: EeventTypes.lecture,
185    eventTitle: "Marvel Conf",
186    startTime: 600,
187    contentModal: (
188      <Fragment>
189        <h1 style={{ fontWeight: "bold", padding: 10 }}>
190          session de discussion sur les revues Marvel
191        </h1>
192        <p>This is the place for the custom element (JSXElement)</p>
193         <h2 style={{fontWeight:"bold"}}>Text example</h2>
194         <p>
195          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta
196          quibusdam delectus esse! Excepturi, omnis sapiente at quo tempora
197          eaque repellendus, a aspernatur impedit reiciendis laborum optio sed
198          quasi cupiditate amet.
199        </p>
200      </Fragment>
201    ),
202  },
203  {
204    id: "56a2bd7c-a898-4502-8414-fa4ace79e749",
205    day: 0,
206    eventType: EeventTypes.game_dark,
207    startTime: 900,
208    eventTitle: "Dark rider game",
209    contentModal: (
210      <Fragment>
211        <h1 style={{ fontWeight: "bold", padding: 10 }}>
212          Event du lundi à 15:00 info
213        </h1>
214        <p>This is the place for the custom element (JSXElement)</p>
215         <h2 style={{fontWeight:"bold"}}>Text example</h2>
216         <p>
217          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta
218          quibusdam delectus esse! Excepturi, omnis sapiente at quo tempora
219          eaque repellendus, a aspernatur impedit reiciendis laborum optio sed
220          quasi cupiditate amet.
221        </p>
222      </Fragment>
223    ),
224  },
225  {
226    id: "56a2bd7c-a898-4502-8414-fa4ace79e749",
227    day: 1,
228    eventType: EeventTypes.lecture,
229    eventTitle: "Marvel Conf",
230    startTime: 600,
231    contentModal: (
232      <Fragment>
233        <h1 style={{ fontWeight: "bold", padding: 10 }}>
234          session de discution sur les revues Marvel
235        </h1>
236        <p>This is the place for the custom element (JSXElement)</p>
237         <h2 style={{fontWeight:"bold"}}>Text example</h2>
238         <p>
239          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta
240          quibusdam delectus esse! Excepturi, omnis sapiente at quo tempora
241          eaque repellendus, a aspernatur impedit reiciendis laborum optio sed
242          quasi cupiditate amet.
243        </p>
244      </Fragment>
245    ),
246  },
247  {
248    id: "56a2bd7c-a898-4502-8414-fa4ace79e749",
249    day: 0,
250    eventType: EeventTypes.food,
251    eventTitle: "Food Party",
252    startTime: 720,
253    contentModal: (
254      <Fragment>
255        <h1 style={{ fontWeight: "bold", padding: 10 }}>
256          Event du lundi à 12:00 info
257        </h1>
258        <p>This is the place for the custom element (JSXElement)</p>
259         <h2 style={{fontWeight:"bold"}}>Text example</h2>
260         <p>
261          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta
262          quibusdam delectus esse! Excepturi, omnis sapiente at quo tempora
263          eaque repellendus, a aspernatur impedit reiciendis laborum optio sed
264          quasi cupiditate amet.
265        </p>
266      </Fragment>
267    ),
268  },
269  {
270    id: "56a2bd7c-a898-4502-8414-fa4ace79e749",
271    day: 1,
272    eventType: EeventTypes.food,
273    eventTitle: "Food Party",
274    startTime: 720,
275    contentModal: (
276      <Fragment>
277        <h1 style={{ fontWeight: "bold", padding: 10 }}>
278          Event du mardi à 12:00 info
279        </h1>
280        <p>This is the place for the custom element (JSXElement)</p>
281         <h2 style={{fontWeight:"bold"}}>Text example</h2>
282         <p>
283          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta
284          quibusdam delectus esse! Excepturi, omnis sapiente at quo tempora
285          eaque repellendus, a aspernatur impedit reiciendis laborum optio sed
286          quasi cupiditate amet.
287        </p>
288      </Fragment>
289    ),
290  },
291  {
292    id: "56a2bd7c-a898-4502-8414-fa4ace79e749",
293    day: 2,
294    eventType: EeventTypes.food,
295    eventTitle: "Food Party",
296    startTime: 720,
297    contentModal: (
298      <Fragment>
299        <h1 style={{ fontWeight: "bold", padding: 10 }}>
300          Event du lundi à 12:00 info
301        </h1>
302        <p>This is the place for the custom element (JSXElement)</p>
303         <h2 style={{fontWeight:"bold"}}>Text example</h2>
304         <p>
305          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta
306          quibusdam delectus esse! Excepturi, omnis sapiente at quo tempora
307          eaque repellendus, a aspernatur impedit reiciendis laborum optio sed
308          quasi cupiditate amet.
309        </p>
310      </Fragment>
311    ),
312  },
313];
314

The HomePage (for demo)

1import { Link } from "react-router-dom";
2
3const HomePage = () => {
4  return (
5    <div>
6       <Link style={{fontSize:18}}
7        data-testid="demo-button"
8        to={`/schedule/`}
9      >
10        Go to demo...
11      </Link>
12      <h1>Go to Schedule view</h1>
13     
14    </div>
15  );
16};
17
18export default HomePage;
19

:hotsprings: Temperature type view

This example is implemented with fake data for easily copy/paste in your project & adding more convenience for understanding the logic.

you can see the example code: here

1// App.tsx
2import { Suspense, useEffect, useState } from "react";
3import "../App.css";
4import { Route, Routes } from "react-router-dom";
5import Schedule from "react-simple-schedule-viewer";
6import { useTheme } from "../theme/useTheme";
7import { TcolorCellByEvents, TeventsName, TeventsTextColor } from "./dataTypes";
8import { EeventTypes, eventTypeData, scheduleByEventPlace } from "./eventData";
9import React from "react";
10import HomePage from "../HomePage";
11
12function App() {
13  //  Variables for the Schedule component
14  const weekStartsOn = 0;
15  const { theme, setTheme } = useTheme();
16  const [isDarkMode] = useState(theme === "dark" ? true : false);
17
18  // the default order of background colors in the array is
19  const colorCellByEvents: TcolorCellByEvents = {
20    [EeventTypes.presence_1]: "#FFECC8", // eventType_1 - required
21    [EeventTypes.presence_2]: "#FFAACF", // eventType_2 - optional
22    [EeventTypes.presence_3]: "#BFF6C3", // eventType_3 - optional
23    [EeventTypes.presence_4]: "#CDC1FF", // eventType_4 - optional
24    [EeventTypes.eco]: "#7BD3EA", // eventType_5 - optional
25    [EeventTypes.away]: isDarkMode ? "#2D3648" : "#f3f3f3", // eventType_6 - required - is always the away, closed or absent event
26    // eventType_7: "#FFDEFA", // eventType_7 - optional
27  };
28  // the default order of text colors in the array is
29  const eventsTextColor: TeventsTextColor = {
30    [EeventTypes.presence_1]: "#c8a026", // eventType_1 - required
31    [EeventTypes.presence_2]: "#7b2e7b", // eventType_2 - optional
32    [EeventTypes.presence_3]: "#0eb318", // eventType_3 - optional
33    [EeventTypes.presence_4]: "#756AB6", // eventType_4 - optional
34    [EeventTypes.eco]: "#1e646e", // eventType_5 - optional
35    [EeventTypes.away]: "#84878a", // eventType_6 - required - is always the away, closed or absent event
36    // eventType_7: "#B97A95", // eventType_7 - optional
37  };
38
39  // This is for TEMP & CALENDAR type of schedule, the names of all eventTypes.
40  // (for the EVENT type, the name of the event is on the contentForModal - eventTitle)
41  const eventsName: TeventsName = {
42    [EeventTypes.presence_1]: "Présence 1",
43    [EeventTypes.presence_2]: "Présence 2",
44    [EeventTypes.presence_3]: "Présence 3",
45    [EeventTypes.presence_4]: "Présence 4",
46    [EeventTypes.eco]: "Éco",
47    [EeventTypes.away]: "Absence",
48  };
49  //  For french/English support both at the same time
50  const eventsNameUs: TeventsName = {
51    [EeventTypes.presence_1]: "Presence 1",
52    [EeventTypes.presence_2]: "Presence 2",
53    [EeventTypes.presence_3]: "Presence 3",
54    [EeventTypes.presence_4]: "Presence 4",
55    [EeventTypes.eco]: "Eco",
56    [EeventTypes.away]: "Away",
57  };
58
59  useEffect(() => {
60    if (isDarkMode) {
61      setTheme("dark");
62    } else if (!isDarkMode) {
63      setTheme("light");
64    }
65  });
66
67  return (
68    <div className="App">
69     <Routes>
70      <Route path="/" element={<HomePage />} />
71        <Route
72          path="/schedule/*"
73          element={
74            <Suspense fallback={<div>Loading...</div>}>
75              <Schedule
76                scheduleByEventPlace={scheduleByEventPlace}
77                weekStartsOn={weekStartsOn}
78                isInDarkMode={isDarkMode}
79                colorCellByEvents={colorCellByEvents}
80                eventsTextColor={eventsTextColor}
81                locale={"fr"}
82                eventsNameUs={eventsNameUs}
83                eventsName={eventsName}
84                eventTypeData={eventTypeData}
85                  // If you want to display the number of the day on each day names
86                // withDays={false}
87                  // If you want to display a list with all schedules before the calendar view 
88                // withList={false}
89                  // If you want to display a return button to the list of schedules 
90                // withListReturnButton={true}
91                  // If you display a return button, the french button text 
92                // withListButtonName="Retourner à la page d'acceuil"
93                  // If you display a return button, the english button text 
94                // withListButtonNameUs="Go to HomePage"
95              />
96            </Suspense>
97          }
98        />
99      </Routes>
100    </div>
101  );
102}
103
104export default App;
105
106

The Typescript types file

• (the same for each type of schedule)

1// dataTypes.ts
2export interface getSchedulesByEventPlaceIdResponse {
3  schedules: {
4    id: string;
5    title: string;
6    type: string;
7    day_slot_set: {
8      days: number[];
9      time_slot: {
10        start: number;
11        instruction: string;
12      }[];
13    }[];
14  }[];
15}
16export type TeventTypeData = {
17  eventPlace_id?: string;
18  eventType_1: string;
19  eventType_2?: string;
20  eventType_3?: string;
21  eventType_4?: string;
22  eventType_5?: string;
23  eventType_6: string;
24  eventType_7?: string;
25};
26export type TcolorCellByEvents = Omit<TeventTypeData, "eventPlace_id">;
27
28export type TeventsTextColor = Omit<TeventTypeData, "eventPlace_id">;
29
30export enum LanguageKeys {
31  en = "en",
32  fr = "fr",
33}
34
35
36export type TeventsName = {
37  eventType_1: string;
38  eventType_2?: string;
39  eventType_3?: string;
40  eventType_4?: string;
41  eventType_5?: string;
42  eventType_6: string;
43  eventType_7?: string;
44}

the data file

1// eventData.ts
2import {
3  getSchedulesByEventPlaceIdResponse,
4  TeventTypeData,
5} from "./dataTypes";
6
7//  enum for identidying the event_Type easily
8export enum EeventTypes {
9  presence_1 = "eventType_1",
10  presence_2 = "eventType_2",
11  presence_3 = "eventType_3",
12  presence_4 = "eventType_4",
13  eco = "eventType_5",
14  away = "eventType_6", // eventType_6 must be always the away, away or no activity event
15  // appointement = "eventType_7", no used in this example
16}
17
18export const scheduleByEventPlace: getSchedulesByEventPlaceIdResponse = {
19  schedules: [
20    {
21      id: "f00b3838-4906-4549-a299-0ed334937ab3",
22      title: "Exemple de calendrier  de type 'temp'",
23      type: "temp",
24      day_slot_set: [
25        {
26          days: [0, 1, 2, 3, 4],
27          time_slot: [
28            {
29              start: 0,
30              instruction: EeventTypes.away,
31            },
32            {
33              start: 360,
34              instruction: EeventTypes.eco,
35            },
36            {
37              start: 600,
38              instruction: EeventTypes.presence_1,
39            },
40            {
41              start: 720,
42              instruction: EeventTypes.presence_2,
43            },
44            {
45              start: 960,
46              instruction: EeventTypes.presence_3,
47            },
48          ],
49        },
50        {
51          days: [5, 6],
52          time_slot: [
53            {
54              start: 0,
55              instruction: EeventTypes.away,
56            },
57            {
58              start: 360,
59              instruction: EeventTypes.presence_4,
60            },
61          ],
62        },
63      ],
64    },
65    {
66      id: "0dabee1d-0d06-4245-9c2c-235d28817cd0",
67      title: "Exemple de calendrier de type 'temp' vide",
68      type: "temp",
69      day_slot_set: [
70        {
71          days: [0, 1, 2, 3, 4, 5, 6],
72          time_slot: [
73            {
74              start: 0,
75              instruction: EeventTypes.away,
76            },
77          ],
78        },
79      ],
80    },
81  ],
82};
83
84export const eventTypeData: TeventTypeData = {
85  eventPlace_id: "b4514cca-bd0f-4876-a3c3-b77444c047b4",
86  [EeventTypes.presence_1]: "19",
87  [EeventTypes.presence_2]: "20",
88  [EeventTypes.presence_3]: "21",
89  [EeventTypes.presence_4]: "22",
90  [EeventTypes.eco]: "6.5",
91  [EeventTypes.away]: "12",
92};
93

The HomePage (for demo)

1import { Link } from "react-router-dom";
2
3const HomePage = () => {
4  return (
5    <div>
6       <Link style={{fontSize:18}}
7        data-testid="demo-button"
8        to={`/schedule/`}
9      >
10        Go to demo...
11      </Link>
12      <h1>Go to Schedule view</h1>
13     
14    </div>
15  );
16};
17
18export default HomePage;
19

:calendar: Calendar type view

This example is implemented with fake data for easily copy/paste in your project & adding more convenience for understanding the logic.

you can see the example code: here

1// App.tsx
2import { Suspense, useEffect, useState } from "react";
3import "../App.css";
4import { Route, Routes } from "react-router-dom";
5import { TcolorCellByEvents, TeventsName, TeventsTextColor } from "./dataTypes";
6import {EeventTypes, eventTypeData, scheduleByEventPlace } from "./eventData";
7import React from "react";
8import { useTheme } from "../theme/useTheme";
9import HomePage from "../HomePage";
10
11import Schedule from "react-simple-schedule-viewer";
12
13
14function App() {
15  //  Variables for the Schedule component
16  const weekStartsOn = 0;
17  const { theme, setTheme } = useTheme();
18  const [isDarkMode] = useState(theme === "dark" ? true : false);
19
20  // the default order of background colors in the array is
21  const colorCellByEvents: TcolorCellByEvents = {
22    [EeventTypes.appointement]: "#FFDEFA", // eventType_1 - required
23    [EeventTypes.away]: isDarkMode ? "#2D3648" : "#f3f3f3", // eventType_6 - required - is always the away, closed or absent event
24  };
25  // the default order of text colors in the array is
26  const eventsTextColor: TeventsTextColor = {
27    [EeventTypes.appointement]: "#B97A95", // eventType_1 - required
28    [EeventTypes.away]: "#84878a", // eventType_6 - required - is always the away, closed or absent event
29  };
30
31  // This is for TEMP & CALENDAR type of schedule, the names of all eventTypes.
32  // (for the EVENT type, the name of the event is on the contentForModal - eventTitle)
33  const eventsName: TeventsName = {
34    [EeventTypes.appointement]: "rendez-vous quotidien",
35    [EeventTypes.away]: "Pas de rendez-vous",
36  };
37  //  For french/English support both at the same time
38  const eventsNameUs: TeventsName = {
39    [EeventTypes.appointement]: "daily appointment",
40    [EeventTypes.away]: "No appointment",
41  };
42
43  useEffect(() => {
44    if (isDarkMode) {
45      setTheme("dark");
46    } else if (!isDarkMode) {
47      setTheme("light");
48    }
49  });
50
51  return (
52    <div className="App">
53      <Routes>
54        <Route path="/" element={<HomePage />} />
55        <Route
56          path="/schedule/*"
57          element={
58            <Suspense fallback={<div>Loading...</div>}>
59              <Schedule
60                scheduleByEventPlace={scheduleByEventPlace}
61                weekStartsOn={weekStartsOn}
62                isInDarkMode={isDarkMode}
63                colorCellByEvents={colorCellByEvents}
64                eventsTextColor={eventsTextColor}
65                locale={"fr"}
66                eventsNameUs={eventsNameUs}
67                eventsName={eventsName}
68                eventTypeData={eventTypeData}
69              />
70            </Suspense>
71          }
72        />
73      </Routes>
74    </div>
75  );
76}
77
78export default App;
79
80
81

The Typescript types file

• (the same for each type of schedule)

1// dataTypes.ts
2export interface getSchedulesByEventPlaceIdResponse {
3  schedules: {
4    id: string;
5    title: string;
6    type: string;
7    day_slot_set: {
8      days: number[];
9      time_slot: {
10        start: number;
11        instruction: string;
12      }[];
13    }[];
14  }[];
15}
16export type TeventTypeData = {
17  eventPlace_id?: string;
18  eventType_1: string;
19  eventType_2?: string;
20  eventType_3?: string;
21  eventType_4?: string;
22  eventType_5?: string;
23  eventType_6: string;
24  eventType_7?: string;
25};
26export type TcolorCellByEvents = Omit<TeventTypeData, "eventPlace_id">;
27
28export type TeventsTextColor = Omit<TeventTypeData, "eventPlace_id">;
29
30export enum LanguageKeys {
31  en = "en",
32  fr = "fr",
33}
34
35
36export type TeventsName = {
37  eventType_1: string;
38  eventType_2?: string;
39  eventType_3?: string;
40  eventType_4?: string;
41  eventType_5?: string;
42  eventType_6: string;
43  eventType_7?: string;
44}

the data file

1// eventData.ts
2import {
3  getSchedulesByEventPlaceIdResponse,
4  TeventTypeData,
5} from "./dataTypes";
6
7    //  enum for identidying the event_Type easily
8    export enum EeventTypes {
9      appointement = "eventType_1",
10      away = "eventType_6", // eventType_6 must be always the away, away or no activity event
11      // appointement = "eventType_7", no used in this example
12    }
13
14export const scheduleByEventPlace: getSchedulesByEventPlaceIdResponse = {
15  schedules: [
16    {
17      id: "d86ae448-012e-4f87-a7e5-d8e667346ea6",
18      title: "Exemple de calendrier de type 'calendar'",
19      type: "calendar",
20      day_slot_set: [
21        {
22          days: [0, 1, 2, 3, 4, 5, 6],
23          time_slot: [
24            {
25              start: 0,
26              instruction: EeventTypes.away,
27            },
28            {
29              start: 600,
30              instruction: EeventTypes.appointement,
31            },
32            {
33              start: 960,
34              instruction: EeventTypes.away,
35            },
36          ],
37        },
38      ],
39    },
40    {
41      id: "61d6024f-8d18-43dc-8cdc-9c38c796b93b",
42      title: "Exemple de calendrier de type 'calendar' vide",
43      type: "calendar",
44      day_slot_set: [
45        {
46          days: [0, 1, 2, 3, 4, 5, 6],
47          time_slot: [
48            {
49              start: 0,
50              instruction: EeventTypes.away,
51            },
52          ],
53        },
54      ],
55    },
56  ],
57};
58
59export const eventTypeData: TeventTypeData = {
60  eventPlace_id: "b4514cca-bd0f-4876-a3c3-b77444c047b4",
61  [EeventTypes.appointement]: "", // No need to put some text here for this type of schedule but this value is required
62  [EeventTypes.away]: "Pas de rendez-vous", // This value is required too
63};
64
65

The HomePage (for demo)

1import { Link } from "react-router-dom";
2
3const HomePage = () => {
4  return (
5    <div>
6       <Link style={{fontSize:18}}
7        data-testid="demo-button"
8        to={`/schedule/`}
9      >
10        Go to demo...
11      </Link>
12      <h1>Go to Schedule view</h1>
13     
14    </div>
15  );
16};
17
18export default HomePage;
19

Last precision

• You can combine all schedule types at the same time,

• if you want to see how, there is a link to the complex demo repository wich combine all schedules type together.

Link to the repository here

---

:pencil2: Contributing

Contributions to react-simple-schedule-viewer are welcome! If you have any issues, feature requests, or improvements, please open an issue or submit a pull request on the GitHub repository. Your feedback and support are highly appreciated!

Reporting Issues

If you encounter any problems while using the library, please open an issue on GitHub. Provide as much detail as possible, including steps to reproduce the issue and any relevant code or screenshots.

Feature Requests

Have an idea for a new feature? Please open an issue with a detailed description of the feature you'd like to see, and why it would be useful.

Thank you for your interest in contributing to react-simple-schedule-viewer!

:bust_in_silhouette: Author

• Thought, designed and developed with :purple_heart: by Rodolphe Augusto

---

:large_blue_diamond: A few words from the author

Enjoy the World :smirk:

---

:sparkling_heart: Support the project

I put almost everything open-source I can, and try to accommodate anyone who needs help using these projects. Obviously, this takes time. You can use this service for free.

However, if you are using this project and are happy with it or just want to encourage me to keep creating: -

• Put a star and share the project :rocket:

Thank you! :heart:

---

:scroll: License

The MIT License.

My other projects:

react-wheel-time-picker

https://www.npmjs.com/package/react-wheel-time-picker

My Simple Tutorial Creator

https://github.com/rodolphe37/my-simple-tutorial-creator

My Simple Cam

https://github.com/rodolphe37/my-simple-cam-dektop-app

My SimpleTasks Manager (software version for Linux, Mac & Windows)

https://github.com/rodolphe37/my-simple-tasks-manager-desktop-version

QRCode Tools

https://github.com/rodolphe37/qr-code-tools

App for decrypt greenPass europe QRcode

https://github.com/rodolphe37/qrcode-decoder

Css animation with Create React App base.

https://github.com/rodolphe37/halloween2021-bat-tuto-youtube-video

My GitHub "open Sources" project

https://github.com/rodolphe37/pwa-react-project

cra-template-github-my-profile

https://github.com/rodolphe37/cra-template-github-my-profile

My Awesome Custom Alert

https://github.com/rodolphe37/my-awesome-custom-alert

Geolocation starter app React-native

https://github.com/rodolphe37/react-native_geolocation-tracker

Classic React Ultimate Messenger version repository (for open sources contributors)

https://github.com/rodolphe37/rum-open-sources

React Ultimate Messenger template for React (create-react-app tools)

https://github.com/rodolphe37/cra-react-ultimate-messenger

PWA React Ultimate Messenger template for React (create-react-app tools)

https://github.com/rodolphe37/cra-pwa-react-ultimate-messenger

installation and initialization shell script for the PWA React Ultimate Messenger template

https://github.com/rodolphe37/pwa-rum-install-pack

Upload-image-profil-component

https://github.com/rodolphe37/Upload-image-profil-component

Jeux libres de droits "open Sources" - Memory Yoga Cards Game - Sort the Waste Game - Match 3 Yoga Game - Tetris Classic Game - Remake Earth Puzzle Game

https://github.com/rodolphe37/install-games-repository

Administration template - React JS & react-admin

https://github.com/rodolphe37/nfc-updates-front

Administration template Backend - Node & Express

https://github.com/rodolphe37/nfc-updates-back

---