flutter_timeline_calendar 1.0.9
flutter_timeline_calendar: ^1.0.9 copied to clipboard
Gregorian and Jalali Event calendar for flutter with options for change style
Timeline Calendar #
How to install : #
Add this to your package's pubspec.yaml file:
dependencies:
flutter_timeline_calendar: ^1.0.9
copied to clipboard
Then You can install packages from the command line:
$ pub get
copied to clipboard
or
$ flutter pub get
copied to clipboard
Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.
Now in your Dart code, you can use:
import 'package:flutter_timeline_calendar/flutter_timeline_calendar.dart';
copied to clipboard
Basic Usage : #
You can load a full calendar .
return TimelineCalendar(
calendarType: CalendarType.GREGORIAN,
calendarLanguage: "en",
calendarOptions: CalendarOptions(
viewType: ViewType.DAILY,
toggleViewType: true,
headerMonthElevation: 10,
headerMonthShadowColor: Colors.black26,
headerMonthBackColor: Colors.transparent,
),
dayOptions: DayOptions(
compactMode: true,
weekDaySelectedColor: const Color(0xff3AC3E2),
disableDaysBeforeNow: true),
headerOptions: HeaderOptions(
weekDayStringType: WeekDayStringTypes.SHORT,
monthStringType: MonthStringTypes.FULL,
backgroundColor: const Color(0xff3AC3E2),
headerTextColor: Colors.black),
onChangeDateTime: (datetime) {
print(datetime.getDate());
},
);
copied to clipboard
Options : #
You have many option for changes in : style , locale and structure.
Option | Type |
---|---|
calendarType | CalendarType ( JALALI or GREGORIAN ) |
calendarOptions | CalendarOptions |
headerOptions | HeaderOptions |
dayOptions | DayOptions |
calendarLanguage | String(fa,en,pt) |
Events #
Name | Description |
---|---|
onInit | Called when Timeline Calendar object is inserted into the tree. |
onChangeDateTime | Return a string of new date selected like (year-month-day) |
onMonthChanged | When the month changes return a string of CalendarDateTime (year-month-day hour:minute:second) |
onYearChanged | When the year changes return a string of CalendarDateTime (year-month-day hour:minute:second) |
onDateTimeReset | When clicking on the reset button return a string of current CalendarDateTime (year-month-day hour:minute:second) |
onChangeViewType | When clicking on the toggleViewType return ViewType |
CalendarOptions : #
Option | Type | Description |
---|---|---|
toggleViewType | bool | Whether user can toggle view type between monthly and daily or not |
viewType | ViewType | Default view type of Calendar Daily or Monthly |
font | String | Name of your font |
headerMonthBackColor | Color | The background color of Calendar card |
headerMonthShadowColor | Color | The shadow color of Calendar card |
headerMonthElevation | double | The elevation of shadow color Calendar card |
headerMonthShape | ShapeBorder | The shape of Calendar card like(RoundedRectangleBorder) |
bottomSheetBackColor | Color | The background color of select month and year bottom sheet) |
weekStartDate | DateTime | The background color of the week started from date) |
weekEndDate | DateTime | The background color of the week ended from date) |
HeaderOptions : #
Option | Type | Description |
---|---|---|
weekDayStringType | WeekDayStringTypes | Day names FULL or SHORT |
MonthStringTypes | MonthStringTypes | Month names FULL or SHORT |
headerTextColor | Color | The color of Header Text |
headerTextSize | double | The size of Header Text |
navigationColor | Color | The color of Header navigation icons |
resetDateColor | Color | The color of reset date icon |
backgroundColor | Color | The color of background of header and calendar |
DayOptions : #
Option | Type | Description |
---|---|---|
weekDaySelectedColor | Color | The color of the Selected weekday |
weekDayUnselectedColor | Color | The color of the UnSelected weekday |
showWeekDay | bool | Whether weekdays show or not |
compactMode | bool | Whether the Calendar card is compact or not |
selectedBackgroundColor | Color | The background color of the selected day |
unselectedBackgroundColor | Color | The background color of the unselected day |
selectedTextColor | Color | The text color of the selected day |
disabledTextColor | Color | The text color of the disabled day |
unselectedTextColor | Color | The text color of the unselected day |
disableFadeEffect | bool | Whether days before now has fade effect or not |
disableDaysBeforeNow | bool | Whether days before now Disabled or not |
disableDaysAfterNow | bool | Whether days after now Disabled or not |
todayTextColor | Color | The text color of today's date |
todayBackgroundColor | Color | The background color of today's date |
differentStyleForToday | bool | Whether today date style is different from other dates or not |
Note : You can use either disableDaysBeforeNow OR disableDaysAfterNow at a time, both option can not work simultaneously.
Locales : #
Timeline Calendar supports two types of calendar now . Gregorian , and Jalali .