flutter Timeline Calendar Package

Pub License: MIT


Timeline Calendar

How to install :

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_timeline_calendar: ^1.0.9

Then You can install packages from the command line:

$ pub get

or

$ flutter pub get

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';

flutter Timeline Calendar Package

flutter Timeline Calendar Package

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());
          },
        );

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 .