Gathering detailed insights and metrics for react-simple-schedule-viewer
Gathering detailed insights and metrics for react-simple-schedule-viewer
Gathering detailed insights and metrics for react-simple-schedule-viewer
Gathering detailed insights and metrics for react-simple-schedule-viewer
📅 An easy configurable weekly Calendar viewer component with three types: event, temperatures, and calendar. 📅
npm install react-simple-schedule-viewer
Typescript
Module System
Node Version
NPM Version
react-simple-schedule-viewer
Published on 19 Nov 2024
react-simple-schedule-viewer
Published on 19 Nov 2024
react-simple-schedule-viewer
Published on 19 Nov 2024
react-simple-schedule-viewer
Published on 19 Nov 2024
react-simple-schedule-viewer
Published on 07 Oct 2024
react-simple-schedule-viewer
Published on 07 Oct 2024
JavaScript (48.95%)
TypeScript (39.37%)
CSS (11.67%)
Total Downloads
1,355
Last Day
4
Last Week
8
Last Month
65
Last Year
1,355
1 Stars
77 Commits
1 Watching
1 Branches
1 Contributors
Minified
Minified + Gzipped
Latest Version
1.4.21
Package Id
react-simple-schedule-viewer@1.4.21
Unpacked Size
372.58 kB
Size
53.47 kB
File Count
279
NPM Version
10.8.2
Node Version
20.18.0
Publised On
19 Nov 2024
Cumulative downloads
Total Downloads
Last day
-77.8%
4
Compared to previous day
Last week
-65.2%
8
Compared to previous week
Last month
-74%
65
Compared to previous month
Last year
0%
1,355
Compared to previous year
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:
To see the live demo: Click here
for info:
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 ...
for info:
1yarn add -D recoil react-error-boundary
npm install react-simple-schedule-viewer
or
yarn add react-simple-schedule-viewer
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 |
- 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"
: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
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 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}
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
- 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
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
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 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}
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
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
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 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}
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
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
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.
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!
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.
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
!
Enjoy the World :smirk:
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: -
Thank you! :heart:
The MIT License.
react-wheel-time-picker
My Simple Tutorial Creator
My Simple Cam
My SimpleTasks Manager (software version for Linux, Mac & Windows)
https://github.com/rodolphe37/my-simple-tasks-manager-desktop-version
QRCode Tools
App for decrypt greenPass europe QRcode
Css animation with Create React App base.
https://github.com/rodolphe37/halloween2021-bat-tuto-youtube-video
My GitHub "open Sources" project
cra-template-github-my-profile
https://github.com/rodolphe37/cra-template-github-my-profile
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)
React Ultimate Messenger template for React (create-react-app tools)
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
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
Administration template - React JS & react-admin
Administration template Backend - Node & Express
No vulnerabilities found.
No security vulnerabilities found.