Muvi Calendar 📅

A library made with Typescript & React, designed to manage and organize events interactively. Inspired by Google Calendar & react-calendar-timeline.

Getting started

Dependencies

• React
• Day.js

Installation

To install Muvi Calendar execute npm install muvi-calendar

Use

This is a example to how to implement it using all the functionalities, each prop used will be detailed later.

import Calendar from 'muvi-calendar/dist/App.js;

const MyApp(){
	const events = [
	  {
	    id: "64999123",
	    name: "Lee sin",
	    category: "Performance",
	    duration: 60,
	    start_date: "2024-04-06T22:00:00.000",
	    end_date: "2024-04-06T23:00:00.000",
	    location_id: "14",
	  },
	  {
    id: "64999124",
    name: "Ekko",
    category: "Performance",
    duration: 20,
    start_date: null,
    end_date: null,
    location_id: null,
  },
	];
	const venues = [
	  {
	    id: "14",
	    name: "Venue 1",
	  },
		{
    id: "15",
    name: "Venue 2",
    open_times: [{ open: "2024-04-03T06:45:09", close: "2024-04-03T23:00:52" }],
    palette: {
      font_color: "#e20707",
      solid: "#8502c2",
	    }
	  }
	];
	const days = [ 
	"2024-04-03",
  "2024-04-04",
  "2024-04-05",
  "2024-04-06",
  "2024-04-10",
  "2024-04-11", 
  ];
  const timeZone = '-3'
  
	//Interactive functions for events
	const handleMove = () => {};
	const onClick= () => {};
	const onResize= () => {};
	const scheduleEvent= () => {};
	//Loader custom component
	const Myloader = ()=>{
	return (
			<div>💫</div>
		)
	};
	//Header custom component
	const MyHeader = ()=>{
	return (
			<div>...component</div>
		)
	};
	//Ationbar custom component
	const MyActionBar= ()=>{
	return (
			<div>...component</div>
		)
	};
	
return(
 <div style={{height: '40rem',width: '100%'}}>
      <Calendar
		     items={events}
         venues={venues}
         onItemMove={handleMove}
         onClick={onClick}
         onResize={onResize}
         scheduleEvent={scheduleEvent}
         timeZone={timeZone}
         loader={MyLoader}
         header={MyHeader}
         actionBar={MyActionBar}
         venueConfig={{textStyle:CSS,containerStyle:CSS}}
         itemConfig={{textStyle:CSS,eventStyle:CSS,titleStyle:CSS,timesStyle:CSS,containerStyle:CSS}}
         styleProps={{tableStyle:CSS,header:CSS,daysContainer:CSS,colorOutOfHours:CSS,timeZone:CSS}}
       />
  </div>
  

Testing

We implemented the E2E testing framework Playwright. Wich is used when doing npm run build . The testing section is located inside the /test folder and his runing in several ways:

• Headless Mode

 npx playwright test

• Visual Mode

 npx playwright test --ui

• CodeGen ( test generator and inspector )

 npx playwright codegen <http://localhost:5173/>