Qwik-calendar NPM

qwik-calendar

A calendar component for qwik apps!

The goal is to recreate wojtekmaj/react-calendar for qwik applications. This library is still in development so there are a lot of incomplete stuff

Instalation

You can install this component libary using:

npm i qwik-calendar

Usage

import { Calendar } from "qwik-calendar";

export default () => {
  return (
    <>
      <head>
        <meta charSet="utf-8" />
        <title>Qwik Calendar by Kunum</title>
      </head>
      <body>
        <Calendar/>
      </body>
    </>
  );
};

User guide

Calendar

import { Calendar } from "qwik-calendar";

<Calendar/>

Prop name	Prop Type	Description	Default value	Example values
onClickDay$	(day: Date) => void \| undefined	Function called when the user clicks a day.	n/a	`(value) => alert('Clicked day: ', value)`
calendarStyles	CSSProperties\| undefined	CSS styles for the calendar container	n/a	`{borderRadius: "10px"}`
navigationStyles	CSSProperties\| undefined	CSS styles for the navigation (header) container	n/a	`{backgroundColor: "#DDDDDD"}`
navigationButtonStyles	CSSProperties \| undefined	CSS styles for the buttons on the navigation bar	n/a	`{fontSize: "12px"}`
monthViewStyles	CSSProperties\| undefined	CSS styles for the month view (days) container	n/a	`{backgroundColor: "#EEEEEE"}`
yearViewStyles	CSSProperties \| undefined	CSS styles for the year view (months) container	n/a	`{backgroundColor: "#EEEEEE"}`
dayStyles	CSSProperties\| undefined	CSS styles for each individual day (MonthView)	n/a	`{borderRadius: "50%"}`
monthStyles	CSSProperties \| undefined	CSS styles for each individual month (YearView)	n/a	`{borderRadius: "10%"}`
daysStyles	CSSProperties\| undefined	CSS styles for the days container	n/a	`{backgroundColor: "#EEEEEE"}`
invalidDayStyles	CSSProperties\| undefined	CSS styles for invalid days (days from other months)	n/a	`{color: "#FEFEFE"}`
dayTextColor	string \| undefined	The color of the day number	`"#00000"`	`"#101101"`
weekendTextColor	string \| undefined	The color of the weekend day number	`"#d10000"`	`"ff0000"`
todayBgColor	string \| undefined	The background color used to mark the current day in the calendar	`"#ffff76"`	`"ffe386"`
locale	string \| undefined	The language of the calendar	`"pt-br"`	`"en-us"`
hideNavigation	boolean \| undefined	Defines if the navigation bar is going to be displayed	`false`	`true`
showNeighbouringMonth	boolean \| undefined	Defines if the Month View is going to display days from the neighbouring months	`true`	`false`
startingView	string \| undefined	Defines in which view the calendar will start when first-rendered	`"month"`	`"year"`

Views

Views are pre-defined exibition of the calendar that shows diferent kinds os dates. The user can move foward or backwards through the dates faster using diferent views that can be changed using the navigation bar.

Avaliable views: