Custom calendar dialog widget for flutter with (multi select, single select, date range) mode

Overview

some calendar

pub package License support

Awesome Flutter

Custom calendar with Multi-select & range configurable calendar

New Features

  • Added View Mode Somecalendar #15

Help Maintenance

I've taken the time to make this library, help support to develop it or buy me coffee and snacks to be even more enthusiastic
Buy Me A Coffee Paypal

Gif Somecalendar (Dialog)


Multi

Range

Single

Requirements to run the demo

Setup

Add dependency to your pubspec.yaml:

some_calendar: ^{latest_version}

Basic use

First, add an import to your code:

import 'package:some_calendar/some_calendar.dart';

Setting Locale

First, add an import to your code:

import 'package:intl/intl.dart';
import 'package:intl/date_symbol_data_local.dart';

  @override
  void initState() {
    initializeDateFormatting();
    Intl.systemLocale = 'en_En'; // to change the calendar format based on localization
    super.initState();
  }

with dialog

Single Mode, add to your code:

    showDialog(
        context: context,
        builder: (_) => SomeCalendar(
          mode: SomeMode.Single,
          isWithoutDialog: false,
          selectedDate: selectedDate,
          labels: new Labels(
              dialogDone: 'Selesai',
              dialogCancel: 'Batal',
              dialogRangeFirstDate: 'Tanggal Pertama',
              dialogRangeLastDate: 'Tanggal Terakhir',
          ),
          startDate: Jiffy().subtract(years: 3),
          lastDate: Jiffy().add(months: 9),
          done: (date) {
            setState(() {
              selectedDate = date;
              showSnackbar(selectedDate.toString());
            });
          },
        ));

Multi Mode, add to your code:

    showDialog(
        context: context,
        builder: (_) => SomeCalendar(
          mode: SomeMode.Multi,
          startDate: Jiffy().subtract(years: 3),
          lastDate: Jiffy().add(months: 9),
          isWithoutDialog: false,
          selectedDates: selectedDates,
          viewMode: ViewMode.Edit,
          done: (date) {
            setState(() {
              selectedDates = date;
              showSnackbar(selectedDates.toString());
            });
          },
        ));

Range Mode, add to your code:

    showDialog(
        context: context,
        builder: (_) => SomeCalendar(
          mode: SomeMode.Range,
          startDate: Jiffy().subtract(years: 3),
          lastDate: Jiffy().add(months: 9),
          selectedDates: selectedDates,
          isWithoutDialog: false,
          viewMode: ViewMode.Edit,
          primaryColor: Colors.red,
          done: (date) {
            setState(() {
              selectedDates = date;
              showSnackbar(selectedDates.toString());
            });
          },
        ));

SomeMode

SomeMode
Range
Single
Multi

Parameters

parameter types defaultValues
primaryColor color Color(0xff365535)
textColor color Colors.black
selectedDate Date Date.now()
selectedDates Date[] Date.now() + 4 days
isWithoutDialog bool true
scrollDirection Axis Axis.vertical
startDate Date
lastDate Date
mode SomeMode
viewMode ViewMode ViewMode.Edit
Comments
  • selected dates are not updating when i get from server

    selected dates are not updating when i get from server

    Hello @agryva

    SomeCalendar( mode: SomeMode.Multi, startDate: Jiffy().subtract(years: 3), lastDate: Jiffy().add(months: 9), selectedDates: selectedDates, done: (date) { setState(() { selectedDates = date; showSnackbar(selectedDates.toString()); }); }, onTapFunction: (selectedDate) { print(selectedDate); }, ));

    • I get 'selected dates' from server,when i got these dates and set it to the calendar, with setState(){}; It did not update the UI. Please also guide me that how can i remove selected date from the list when i tap on that date, If it is already selected

    • I don't want to show it as dialog

    Thanks

    opened by AbdulBasitSaleem 14
  • Duplicate dates with empty view on last day fo month

    Duplicate dates with empty view on last day fo month

    Describe the bug I am trying to select a single / range from the view on the last day of the month. While opening the calendar view 30th June is duplicated in all rows and selected by default and other dates are simply empty.

    Please see the attached screenshot. Screenshot_1593546219

    When I tried to scroll to the next month all looks good. Screenshot_1593546239

    Here is the code I am trying to open the calendar view;

    void _displayDateRangePicker(BuildContext context, TravelState state) async {
        print('show date picker');
    
        DateTime _startDate = DateTime.now();
        DateTime _endDate = DateTime.now().add(Duration(days: 180));
    
        showDialog(
            context: context,
            builder: (_) => SomeCalendar(
                  mode:
                      (state.tripType is OneWay) ? SomeMode.Single : SomeMode.Range,
                  isWithoutDialog: false,
                  selectedDate: _startDate,
                  startDate: _startDate,
                  lastDate: _endDate,
                  labels: Labels(
                      dialogRangeFirstDate: 'Departure Date',
                      dialogRangeLastDate: 'Return Date',
                      dialogDone: 'Ok'),
                  scrollDirection: Axis.horizontal,
                  primaryColor: AppColors.primary,
                  done: (date) {
                    print(date.toString());
                    if (date is DateTime) {
                      _travelBloc.add(TravelEventSelectSingleDate(date));
                    } else if (date is List) {
                      _travelBloc.add(TravelEventSelectDateRange(date));
                    }
                  },
                ));
      }
    

    I am not sure If I am doing something wrong or it's a library issue. Please try to provide clarity on this. Overall the library is good and I'd to use this for my app.

    Smartphone (please complete the following information):

    • Device: Android

    Additional context Add any other context about the problem here.

    opened by shubhambansal 1
  • Clear default dates in range and multiple picker.

    Clear default dates in range and multiple picker.

    when passing an empty list to some-calendar you select the default dates value(DateTime.now()+4 days).I want to clear the default selected dates. and let User select dates. To Reproduce Steps to reproduce the behavior: 1.SomeCalendar( primaryColor: Color(0xff5833A5), mode: SomeMode.Multi, scrollDirection: Axis.vertical, isWithoutDialog: true, selectedDates: selectedDates, selectedDate: selectedDate, startDate: Jiffy().subtract(years: 3), lastDate: Jiffy().add(months: 9), done: (date) {}, ),

    1

    opened by zeiasoroush 1
  • selectedDates are not showing one calendar is built and you set dates later

    selectedDates are not showing one calendar is built and you set dates later

    Hello @agryva

    duplicate of https://github.com/agryva/Some-Calendar/issues/1#issue-578388390. You have not fixed it yet, I have tested updated library

    Please help regarding this.

    Regards

    opened by AbdulBasitSaleem 0
  • Difficulty in selecting single date in Range Mode calendar

    Difficulty in selecting single date in Range Mode calendar

    The calendar can select a range of dates

    but in the application im building a user can opt to select one date from the date range

    it is possible but the user experience is painful

    opened by BrianRigii 0
  • Added new value in lable collection for selected date

    Added new value in lable collection for selected date

    I wanted to provide text for selected date from outside based on localization. I think you should allow all such texts to be set from outside as well.

    opened by jbasolihde 0
  • Change the firstDayOfWeek

    Change the firstDayOfWeek

    I would like to change the first day of the week from Monday to Sunday. I see in the documentation there is a SomeWeekLabel constructor that includes firstDayOfWeek but I'm not sure how to implement it. Any help would be appreciated.

    opened by emac62 0
  • 兼容不了最新的核心库

    兼容不了最新的核心库

    Because some_calendar >=1.2.3 depends on intl ^0.16.0 and every version of flutter_localizations from sdk depends on intl 0.17.0-nullsafety.2, some_calendar >=1.2.3 is incompatible with flutter_localizations from sdk.

    So, because butler depends on both flutter_localizations any from sdk and some_calendar ^1.2.6, version solving failed. pub get failed (1; So, because butler depends on both flutter_localizations any from sdk and some_calendar ^1.2.6, version solving failed.) exit code 1

    opened by paul-123 3
  • Wrong format when working with small device width

    Wrong format when working with small device width

    Testing on a simulator with a screen size of 480 x 800 The calendar simply shows overlapping context all over. numbers consistent of 2 digits are shown vertically instead of horizontally.

    some_calendar: ^1.2.6

    Screenshot: Screenshot_1601482349

    opened by yageorge 0
  • Incorrectly labeled days of month

    Incorrectly labeled days of month

    Describe the bug November 2020 has two 1st's

    To Reproduce Steps to reproduce the behavior:

    1. Clone master
    2. Flutter pub get
    3. Flutter run (example)
    4. Select any calendar method
    5. Scroll to November 2020
    6. Sunday is correctly labeled as the 1st, Monday the 2nd is incorrectly labeled as the 1st as well shifting the entire month off my 1 day

    Expected behavior Days of the month should never repeat within the same month.

    Screenshots Simulator Screen Shot - iPhone 11 - 2020-07-08 at 08 43 49

    Smartphone:

    • Device: iPhone11 Simulator
    • OS: iOS13.5

    Additional context Flutter Channel master, 1.20.0-2.0.pre

    opened by approachableGeek 2
Owner
Irvan Lutfi Gunawan
🇮🇩 Bandung, Indonesia Android developer, flutter developer, backend developer
Irvan Lutfi Gunawan
Internationalized dialog for picking a single month from an infinite list of years.

month_picker_dialog Internationalized material style dialog for picking a single month from an infinite list of years. This package makes use of the i

Dimitri Krivoj 65 Nov 30, 2022
Tic Tac Toe game with single-player and multi-player options. Implemented minimax algorithm.

flutter_tic_tac_toe A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you star

null 0 Jan 1, 2022
A flutter date time picker inspired by flutter-cupertino-date-picker

Flutter Datetime Picker (Pub) flutter_datetime_picker A flutter date time picker inspired by flutter-cupertino-date-picker you can choose date / time

null 0 Nov 30, 2021
Adaptive dialog - Show alert dialog or modal action sheet adaptively according to platform.

adaptive_dialog Show alert dialog or modal action sheet adaptively according to platform. showOkAlertDialog Convenient wrapper of showAlertDialog. iOS

Masayuki Ono (mono) 244 Dec 17, 2022
Raden Saleh 53 Jul 27, 2023
Ali Türkay AVCI 1 Jan 20, 2022
Flutter application for latest news by top newspapers . And allow for share articles with friends. Now available in night mode. Also landscape mode is available

Breaking News Latest news for almost 55 country. Feature of saving article and search ariticles. Used API https://newsapi.org/ Note: if data is not ge

null 7 Oct 24, 2022
Flutter Cupertino text box which can be used to select a date with CupertinoDatePicker

Flutter Cupertino Date Text Box A text box with an attached CupertinoDatePicker which opens when the text box is tapped. With this library the followi

Christoph Rothermel 5 Feb 13, 2022
A customizable carousel slider widget in Flutter which supports inifinte scrolling, auto scrolling, custom child widget, custom animations and built-in indicators.

flutter_carousel_widget A customizable carousel slider widget in Flutter. Features Infinite Scroll Custom Child Widget Auto Play Horizontal and Vertic

NIKHIL RAJPUT 7 Nov 26, 2022
FT-Custom-Widget - A Custom Widget Built With Flutter

Custom Widget Watch it on YouTube Product Screen Sample when you implement compl

Firgia 5 Mar 29, 2022
A simple flutter app that downloads a file from the internet, shows a custom-made download progress dialog and saves the file to device's internal storage

http_downloader A simple flutter app that downloads a file from the internet using the http plugin. It has a custom-designed progress dialog which dis

Akora Ing. Debrah Kwesi Buabeng 4 Apr 6, 2021
A flutter plugin to play Youtube Videos without API Key in range of Quality(144p, 240p,360p,480p,720p and 1080p).

Youtube Player Plugin This plugin is discontinued. Please use youtube_player_flutter which is an officially provided way of playing youtube videos, su

Sarbagya Dhaubanjar 120 Nov 13, 2022
Flutter package for Android and iOS allow you to show a wide range of hyperlinks either in the input field or in an article view

Tagtly package help you to detect a lot of hyperlink text such as.. email, url, social media tags, hashtag and more either when user type in text field or when appear a text read only.

Mohamed Nasr 4 Jul 25, 2022
Bluecherry DVR client to run across range of devices. 💙

Bluecherry Client Bluecherry DVR client to run across range of devices. Website • Purchase • Chat [work-in-progress] Download iOS (coming soon) Androi

null 9 Dec 2, 2022
Custom Clock App With GetX And Dark Theme & Light Mode

Clock App ✍?? Clock App with GetX [MVC pattern] ????‍?? Clock App app is open-source app for Android & ios. It is built with Dart on top of Google's F

null 12 Oct 21, 2022
A widget that can be dragged and scrolled in a single gesture and snapped to a list of extents.

Sliding Sheet A widget that can be dragged and scrolled in a single gesture and snapped to a list of extents. Click here to view the full example. Ins

null 394 Mar 3, 2022
MindInventory 15 Sep 5, 2022
Flutter custom carousel slider - A carousel slider widget,support custom decoration suitable for news and blog

flutter_custom_carousel_slider A carousel slider Flutter widget, supports custom

Emre 40 Dec 29, 2022
📅 Customizable flutter calendar widget including day and week views

?? Customizable, animated calendar widget including day, week, and month views. Navigation Animation Callbacks Changing the VisibleDateRange Available

Jonas Wanke 276 Jan 1, 2023