Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Fixed Weeks for month calendar #4

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
node_modules
dist
.idea
.vscode
.github
17 changes: 0 additions & 17 deletions .vscode/launch.json

This file was deleted.

8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -123,15 +123,15 @@ The composable returns the following sub-composables
```typescript
const { useMontlyCalendar } = useCalendar()

const { currentMonth } = useMonthlyCalendar({ infinite: false, fullWeeks: false })
const { currentMonth } = useMonthlyCalendar({ infinite: false, fullWeeks: false, fixedWeeks: false })
```

### Parameters

| name | type | optional | default | description |
|------|------|----------|---------|-------------|
| infinite | `boolean` | true | `true` | Indicates if navigating throught the calendar should generate new months on the fly |
| fullWeeks | `boolean` | true | `true` | Indicates if each month should display the "other month" days to complete each week |
| infinite | `boolean` | true | `true` | Indicates if navigating throught the calendar should generate new months on the fly |
| fullWeeks | `boolean` | true | `true` | Indicates if each month should display the "other month" days to complete each week |
| fixedWeeks | `boolean` | true | `false` | Indicates if each month should display the "other month" days to display a fixed number of weeks in the month (6 weeks) |

### Outputs

Expand Down
128 changes: 128 additions & 0 deletions dist/index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
import { Locale } from 'date-fns';
import { Ref, ComputedRef, ShallowReactive } from 'vue';

interface ICalendarDate {
readonly date: Date;
otherMonth: boolean;
disabled: Ref<boolean>;
isSelected: Ref<boolean>;
isBetween: Ref<boolean>;
isHovered: Ref<boolean>;
isToday: boolean;
isWeekend: boolean;
monthYearIndex: number;
dayId: string;
_copied: boolean;
}
type CalendarFactory<C extends ICalendarDate> = (...args: any[]) => C;
declare function dateToMonthYear(dateOrYear: Date | number, month?: number): number;
declare function yearFromMonthYear(monthYear: number): number;
declare function monthFromMonthYear(monthYear: number): number;

type DateInput = Date | string;
type FirstDayOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6;
type WeekdayInputFormat = 'i' | 'io' | 'ii' | 'iii' | 'iiii' | 'iiiii' | 'iiiiii';
interface CalendarComposables<C extends ICalendarDate> {
useWeekdays: (weekdayFormat?: WeekdayInputFormat) => WeekdaysComposable;
useMonthlyCalendar: (opts?: MontlyOptions) => MonthlyCalendarComposable<C>;
useWeeklyCalendar: (opts?: MontlyOptions) => WeeklyCalendarComposable<C>;
factory: CalendarFactory<C>;
}
interface CalendarComposable<C extends ICalendarDate> {
days: ComputedRef<Array<C>>;
selectedDates: Array<Date>;
listeners: Listeners<C>;
}
interface CalendarOptions<C extends ICalendarDate = ICalendarDate> {
startOn?: DateInput;
minDate?: DateInput;
maxDate?: DateInput;
disabled?: Array<DateInput> | ((date: Date) => boolean);
firstDayOfWeek?: FirstDayOfWeek;
locale?: Locale;
preSelection?: Array<Date> | Date;
factory?: (date: ICalendarDate) => C;
}
interface NormalizedCalendarOptions<C extends ICalendarDate = ICalendarDate> {
startOn: Date;
minDate?: Date;
maxDate?: Date;
disabled: Array<Date> | ((date: Date) => boolean);
firstDayOfWeek: FirstDayOfWeek;
locale?: Locale;
preSelection: Array<Date>;
factory: CalendarFactory<C>;
}
interface Computeds<C extends ICalendarDate> {
pureDates: ComputedRef<C[]>;
selectedDates: ComputedRef<C[]>;
hoveredDates: ComputedRef<C[]>;
betweenDates: ComputedRef<C[]>;
}
interface SelectOptions {
strict?: boolean;
multiple?: boolean;
}
type SelectRangeOptions = Pick<SelectOptions, 'strict' | 'multiple'>;
type HoverMultipleOptions = Pick<SelectOptions, 'strict'>;
interface Listeners<C extends ICalendarDate> {
selectSingle: (clickedDate: C) => void;
selectRange: (clickedDate: C, options?: SelectRangeOptions) => void;
selectMultiple: (clickedDate: C) => void;
hoverMultiple: (hoveredDate: C, options?: HoverMultipleOptions) => void;
resetHover: () => void;
resetSelection: () => void;
}
interface Selectors<C extends ICalendarDate> extends Listeners<C> {
selection: Array<Date>;
}
interface MontlyOptions {
infinite?: boolean;
fullWeeks?: boolean;
fixedWeeks?: boolean;
}
interface WrappedDays<C extends ICalendarDate = ICalendarDate> {
days: Array<C>;
index: number;
}
interface Month<C extends ICalendarDate = ICalendarDate> extends WrappedDays<C> {
month: number;
year: number;
}
interface MonthlyCalendarComposable<C extends ICalendarDate> extends CalendarComposable<C> {
currentMonthAndYear: ShallowReactive<{
month: number;
year: number;
}>;
currentMonth: ComputedRef<Month<C>>;
currentMonthYearIndex: ComputedRef<number>;
months: ComputedRef<Month<C>[]>;
jumpTo: (i: number) => void;
nextMonth: () => void;
prevMonth: () => void;
nextMonthEnabled: ComputedRef<boolean>;
prevMonthEnabled: ComputedRef<boolean>;
}
interface Week<C extends ICalendarDate = ICalendarDate> extends WrappedDays<C> {
weekNumber: number;
month: number;
year: number;
}
interface WeeklyCalendarComposable<C extends ICalendarDate> extends CalendarComposable<C> {
weeks: ComputedRef<Array<Week<C>>>;
currentWeekIndex: ComputedRef<number>;
currentWeek: ComputedRef<Week<C>>;
jumpTo: (i: number) => void;
nextWeek: () => void;
prevWeek: () => void;
nextWeekEnabled: ComputedRef<boolean>;
prevWeekEnabled: ComputedRef<boolean>;
}
interface WeeklyOptions {
infinite?: boolean;
}
type WeekdaysComposable = Array<string>;

declare function useCalendar<C extends ICalendarDate = ICalendarDate>(rawOptions: CalendarOptions<C>): CalendarComposables<C>;

export { CalendarComposables, CalendarOptions, Computeds, FirstDayOfWeek, HoverMultipleOptions, ICalendarDate, Listeners, Month, MonthlyCalendarComposable, MontlyOptions, NormalizedCalendarOptions, SelectOptions, SelectRangeOptions, Selectors, Week, WeekdayInputFormat, WeekdaysComposable, WeeklyCalendarComposable, WeeklyOptions, WrappedDays, dateToMonthYear, monthFromMonthYear, useCalendar, yearFromMonthYear };
Loading