custom_calendar_viewer 0.1.1 custom_calendar_viewer: ^0.1.1 copied to clipboard
Amazing package help you to view your plans or important dates in calendar.
Custom Calendar Viewer #
- Amazing package help you to view your plans or important dates in calendar.
Installation #
Add this to your pubspec.yaml
:
dependencies:
custom_calendar_viewer: ^Last Version
Features #
- Amazing package help you to view your plans or important dates in calendar.
- You can add multi dates or multi ranges.
- you can handle the color for each date or you can use active color to give one color for all.
- you can use your own style for each text.
- The package have animation when you moving between months.
- With this package really you will be able to control your calendar view.
- The calendar work with 2 language Arabic and English.
- You can handel the color for each active day (Text or Background).
- You can use Tooltip to give more info about this day.
- Now you can add multiple dates or ranges when the application is started.
- You can handle the color for background or the text color when you add new ranges or dates.
- You can use CustomCalendarType to handle the type of calendar.
- CustomCalendarType.none this will make the user can't press on the calendar.
- CustomCalendarType.date this will make the user can add only one date.
- CustomCalendarType.range this will make the user to add only one range.
- CustomCalendarType.multiDates this will make the user can add multiple dates.
- CustomCalendarType.multiRanges this will make the user can add multiple ranges.
- CustomCalendarType.multiDatesAndRanges this will make the user can add multiple dates and ranges.
Getting started #
import 'package:custom_calendar_viewer/custom_calendar_viewer.dart';
void main() {
}
// Start use th package in your State Widget
What you can handle #
final List<Date>? dates;
final List<RangeDate>? ranges;
final Function(DateTime date)? onDayTapped;
final Function(List<Date>)? onDatesUpdated;
final Function(List<RangeDate>)? onRangesUpdated;
final CustomCalendarType calendarType;
final Color activeColor;
final Color dropArrowColor;
final Color movingArrowColor;
final Color headerBackground;
final Color daysHeaderBackground;
final Color daysBodyBackground;
final Border? currentDayBorder;
final Border? dayBorder;
final bool showCurrentDayBorder;
final bool showHeader;
final double dropArrowSize;
final double movingArrowSize;
final double radius;
final TextStyle headerStyle;
final TextStyle dayNameStyle;
final TextStyle dayNumStyle;
final TextStyle activeDayNumStyle;
final TextStyle dropDownYearsStyle;
final String local;
final Duration duration;
final Duration yearDuration;
final double headerMarginLeft;
final double headerMarginRight;
final double headerMarginTop;
final double headerMarginBottom;
final double daysMarginLeft;
final double daysMarginRight;
final double daysMarginTop;
final double daysMarginBottom;
final String toolTipMessage;
final double? toolTipHeight;
final EdgeInsets? toolTipPadding;
final EdgeInsets? toolTipMargin;
final bool toolTipPreferBelow;
final TooltipTriggerMode toolTipTriggerMode;
final Decoration? toolTipDecoration;
final TextStyle? toolTipTextStyle;
final TextAlign? toolTipTextAlign;
final Duration? toolTipWaitDuration;
final Duration? toolTipShowDuration;
final bool showTooltip;
final Color addDatesIndicatorColor;
final Color addDatesIndicatorActiveColor;
final TextStyle addDatesTextStyle;
final TextStyle addDatesActiveTextStyle;
final EdgeInsets addDatesMargin;
Usage #
For Full Example Go To Example Tap
CustomCalendarViewer(
dates: [
Date(
date: DateTime(2023, 11, 8),
color: Colors.red,
),
Date(
date: DateTime(2023, 11, 10),
color: Colors.amber,
),
Date(
date: DateTime(2023, 11, 7),
color: Colors.amber,
),
Date(
date: DateTime(2023, 11, 1),
color: Colors.red,
),
Date(
date: DateTime(2023, 11, 4),
color: Colors.white,
textColor: Colors.red,
),
Date(
date: DateTime(2023, 11, 5),
color: Colors.white,
textColor: Colors.red,
),
Date(
date: DateTime(2023, 11, 18),
color: Colors.blue,
),
Date(
date: DateTime(2023, 11, 22),
),
],
ranges: [
RangeDate(
start: DateTime(2023, 11, 12),
end: DateTime(2023, 11, 15),
color: Colors.red,
),
RangeDate(
start: DateTime(2023, 11, 24),
end: DateTime(2023, 11, 27),
color: Colors.amber,
),
RangeDate(
start: DateTime(2023, 11, 30),
end: DateTime(2023, 11, 29),
),
],
showCurrentDayBorder: false,
),
Additional information #
- Say to me in GitHub what you need to see in the package in the next update.
- Wait for more feature soon.