Horizontal Calendar Plus

A customizable horizontal calendar widget for Flutter that displays a range of dates with various formatting options, background color settings, and custom designs. Ideal for displaying date ranges and supporting multiple languages in an intuitive UI format.

Features

- Display a horizontal calendar with customizable date ranges
- Flexible date formatting for main labels and subtitles
- Active and inactive color customization
- Support for custom widget designs for each date
- Supports multiple languages: Hindi, Bengali, Nepali
- Scrolls to the current date or a specified date
- Built-in utility to update the displayed date in real-time

Installation

Add horizontal_calendar_plus to your pubspec.yaml file:

Getting started

  • x Add this package your yaml file
  dependencies: 
    horizontal_calendar_plus: 0.0.2

Usage

  @override
  void initState() {
    super.initState();
    // Start date time updater  
    HorizontalCalendarPlus.startDateTimeUpdater(_currentDateNotifier);

    //Always highlight current index
    HorizontalCalendarPlus.jumpToCurrentIndex(scrollController);
  }



    HorizontalCalendarPlus(
        currentDateNotifier: _currentDateNotifier, 
        padding: EdgeInsets.only(top: 15,left: 8,right: 8),
        scrollController: scrollController,
        calenderLabelformate: CalenderDateFormate.ABBR_WEEKDAY,
        calenderSubTitleformate: CalenderDateFormate.MONTH_DAY,
        designTypeCalender: DesignTypeCalender.DEFAULTDESIGN,
        boxelevation: 5,
        boxActiveBgColor: Colors.green,
        boxborderRadius: BorderRadius.circular(1),
        changelanguage: Changelanguage.NAPILE,
        cardViewDesign: CardContentView(
        hideIcon: false,
        ),
        
    ),

Build Custom Widget

    designTypeCalender: DesignTypeCalender.CUSTOMDESIGN
    customWidgetbuilder: (context, dateTime, index) {
    final packageCore = PackageCore(builderIndex: index, dateTime: dateTime, countPreviesDate: 3);
    return Card(
        color:  packageCore.dateFormatePlus() == packageCore.checkCurrentDate() ?  Colors.green :  Colors.black,
        elevation: 2,
        shape: RoundedRectangleBorder(
            side: packageCore.dateFormatePlus() == packageCore.checkCurrentDate() ? BorderSide(width: 2,color: Colors.green) : BorderSide(width: 1,color: Colors.black),
            borderRadius: BorderRadius.circular(10),
        ),
        shadowColor: Colors.black,
        borderOnForeground: true,
        margin: EdgeInsets.all(2),
        clipBehavior: Clip.antiAliasWithSaveLayer,
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
            Text( // Label 
                packageCore.showTitle(CalenderDateFormate.MONTH_DAY.skeleton),
                style: TextStyle(fontSize: 14, fontWeight: FontWeight.normal),
            ),
            Text( // SubTitle text 
                packageCore.showSubTitle(CalenderDateFormate.WEEKDAY.skeleton), 
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            ],
        ),
        );
    },

Change Calender Date Formate & Card Content

  // add [skeleton] return String 
  CalenderDateFormate.WEEKDAY.skeleton,
  CalenderDateFormate.MONTH_DAY.skeleton,

  // Card Content update card ui design 
   CardContent

Customization

Main Properties

padding: Adjust padding around the calendar. totaldateCount: Set the total number of dates to display. countPreviesDate: Set how many previous dates are shown before the current date. boxheight: Height of each date box. boxelevation: Set the elevation for each date box.

Colors

boxActiveBgColor: Background color for active (current) date. boxUnActiveBgColor: Background color for inactive dates. cardViewDesign: Customize title and subtitle colors for active/inactive dates, add an icon, and more

Custom Widgets and Designs

customWidgetbuilder: Function to define a custom widget for each date. designTypeCalender: Select between DEFAULTDESIGN or CUSTOMDESIGN for the date display.

Language and Date Formatting

changelanguage: Set the language to Hindi, Bengali, Nepali, or default (English). calenderLabelformate and calenderSubTitleformate: Customize the format of date labels and subtitles using predefined formats in CalenderDateFormate.

Date Utility Methods

startDateTimeUpdater: Automatically updates the displayed date in real-time. jumpToCurrentIndex: Programmatically scroll to the current date.

Example: Start Real-Time Date Updates

HorizontalCalendarPlus.startDateTimeUpdater(_currentDateNotifier, timeUpdateseconds: 1);

Available Date Formats (CalenderDateFormate)

DAY: e.g., "d" WEEKDAY: Full weekday name ABBR_MONTH: Abbreviated month name (e.g., "Jan") YEAR_MONTH_DAY: e.g., "2024 January 1" And many more! See the CalenderDateFormate enum for full list.

Localization

This package supports:

English (default) Hindi Bengali Nepali

changelanguage: Changelanguage.HINDI,

Package UI view

Horizantal Calender plus

Next Goals

  • x Add more country Multiple country languages HINDI, BANGLA, NAPILE, ENGLISH
  • x Issue solved & improve
  • x Add more design template

horizontal_calendar_plus

This README.md provides users with an overview, installation guide, usage instructions, customization options, and examples for using horizontal_calendar_plus. It also includes references to language settings and formatting options. Adjust the example and details as necessary to fit your final implementation.

Libraries

horizontal_calendar_plus