All Projects → aminography → Primedatepicker

aminography / Primedatepicker

Licence: apache-2.0
PrimeDatePicker is a tool that provides picking a single day, multiple days, and a range of days.

Programming Languages

kotlin
9241 projects

Projects that are alternatives of or similar to Primedatepicker

Calendarview
An Easy to Use Calendar for iOS (Swift 5.0)
Stars: ✭ 429 (+46.92%)
Mutual labels:  calendar, datepicker, calendar-view, calendar-component
Customizablecalendar
CustomizableCalendar is a library that allows you to create your calendar, customizing UI and behaviour
Stars: ✭ 214 (-26.71%)
Mutual labels:  calendar, calendar-view, calendar-component
Eventscalendar
Events Calendar is a user-friendly library that helps you achieve a cool Calendar UI with events mapping. You can customise every pixel of the calendar as per your wish and still achieve in implementing all the functionalities of the native android calendar in addition with adding dots to the calendar which represents the presence of an event on the respective dates. It can be done easily, you are just a few steps away from implementing your own badass looking Calendar for your very own project!
Stars: ✭ 188 (-35.62%)
Mutual labels:  calendar, calendar-view, calendar-component
Material Calendar View
📅 Material Design Calendar compatible with API 11+
Stars: ✭ 360 (+23.29%)
Mutual labels:  material-design, calendar, calendar-view
Recyclercalendarandroid
A simple DIY library to generate your own custom Calendar View using RecyclerView, written in Kotlin
Stars: ✭ 83 (-71.58%)
Mutual labels:  calendar, calendar-view, calendar-component
Calendar Ios
Calendar View
Stars: ✭ 154 (-47.26%)
Mutual labels:  calendar, calendar-view, calendar-component
Calendarview2
Calendar view for Android. Pretty.
Stars: ✭ 72 (-75.34%)
Mutual labels:  material, calendar, calendar-view
Timetable
📅 Customizable flutter calendar widget including day and week views
Stars: ✭ 140 (-52.05%)
Mutual labels:  material-design, calendar, calendar-view
Material Vue Daterange Picker
a date-range-picker follows the Material Design spec powered by vue.js (alpha)
Stars: ✭ 64 (-78.08%)
Mutual labels:  material-design, material, datepicker
Crunchycalendar
A beautiful material calendar with endless scroll, range selection and a lot more!
Stars: ✭ 465 (+59.25%)
Mutual labels:  material-design, calendar, calendar-view
Yycalendar
Simple and Clear Calendar
Stars: ✭ 46 (-84.25%)
Mutual labels:  calendar, calendar-view, calendar-component
react-calendar
A no dependencies, lightweight and feature-rich ⚡ calendar component for react.
Stars: ✭ 68 (-76.71%)
Mutual labels:  datepicker, calendar-component, calendar-view
Calendarview
Android上一个优雅、万能自定义UI、仿iOS、支持垂直、水平方向切换、支持周视图、自定义周起始、性能高效的日历控件,支持热插拔实现的UI定制!支持标记、自定义颜色、农历、自定义月视图各种显示模式等。Canvas绘制,速度快、占用内存低,你真的想不到日历居然还可以如此优雅!An elegant, highly customized and high-performance Calendar Widget on Android.
Stars: ✭ 7,998 (+2639.04%)
Mutual labels:  calendar, calendar-view, calendar-component
Xamarin.plugin.calendar
Calendar plugin for Xamarin.Forms
Stars: ✭ 159 (-45.55%)
Mutual labels:  calendar, calendar-view, calendar-component
Vue Calendar
🏆 基于 vue 2.0 开发的轻量,高性能日历组件
Stars: ✭ 828 (+183.56%)
Mutual labels:  calendar, datepicker, calendar-component
Horizontal Calendar
A material horizontal calendar view for Android based on RecyclerView
Stars: ✭ 1,155 (+295.55%)
Mutual labels:  material, calendar, datepicker
Vue Functional Calendar
Vue.js Functional Calendar | Component/Package
Stars: ✭ 314 (+7.53%)
Mutual labels:  calendar, datepicker, calendar-component
Cvcalendar
A custom visual calendar for iOS 8+ written in Swift (>= 4.0).
Stars: ✭ 3,435 (+1076.37%)
Mutual labels:  calendar, calendar-view, calendar-component
Md2
Angular2 based Material Design components, directives and services are Accordion, Autocomplete, Collapse, Colorpicker, Datepicker, Dialog(Modal), Menu, Multiselect, Select, Tabs, Tags(Chips), Toast and Tooltip.
Stars: ✭ 389 (+33.22%)
Mutual labels:  material-design, material, datepicker
React Native Paper Dates
Smooth and fast cross platform Material Design date and time picker for React Native Paper
Stars: ✭ 173 (-40.75%)
Mutual labels:  material-design, material, datepicker

PrimeDatePicker ⚡️

Android Arsenal Android Weekly Bintray Codacy Badge API

Firstly, PrimeDatePicker is a tool that provides picking a single day, multiple days, and a range of days. Secondly, you can use internal elements like MonthView and CalendarView as stand-alone views in your projects.

Multiple Days | Civil
BottomSheet | Dark
Range of Days | Persian
BottomSheet | Light
Single Day | Hijri
Dialog | Light
Goto Feature | Japanese
Dialog | Dark

Table of Contents


Core Logic

The ❤️ of this library is provided by PrimeCalendar.


Main Characteristics

  • Endless Scrolling
  • Fully Customizable Views & Themes
  • Align With Material Design
  • Fluent UI
  • RTL Support
  • Landscape Support
  • Various Calendar Types
  • Various Date Picking Strategies
  • Dialog & BottomSheet Presentations
  • Fast Goto

🎯 Download SampleApp.apk


Download

PrimeDatePicker is available on bintray to download using build tools systems. Add the following lines to your build.gradle file:

repositories {
    jcenter()
}
  
dependencies {
    implementation 'com.aminography:primedatepicker:3.4.0'
    implementation 'com.aminography:primecalendar:1.3.2'
}

Usage

To enjoy PrimeDatePicker, create an instance using a builder pattern in simple 4 steps.

  1. Decide on BottomSheet or Dialog representation along with an initial calendar:
// To show a date picker with Civil dates, also today as the starting date
val today = CivilCalendar()

val datePicker = PrimeDatePicker.bottomSheetWith(today)  // or dialogWith(today)
  1. Decide on picking strategy along with passing a proper callback:
val callback = SingleDayPickCallback { day ->
    // TODO
}

val today = CivilCalendar()

val datePicker = PrimeDatePicker.bottomSheetWith(today)
        .pickSingleDay(callback)  // or pickRangeDays(callback) or pickMultipleDays(callback)
  1. Apply some optional configurations:
...

val datePicker = PrimeDatePicker.bottomSheetWith(today)
        .pickSingleDay(callback)
        .initiallyPickedSingleDay(pickedDay)
        ...
  1. Build the date picker and show it:
val callback = SingleDayPickCallback { day ->
    // TODO
}

val today = CivilCalendar()

val datePicker = PrimeDatePicker.bottomSheetWith(today)
        .pickSingleDay(callback)
        .initiallyPickedSingleDay(pickedDay)
        .build()
        
datePicker.show(supportFragmentManager, "SOME_TAG")

Java Example

Java

SingleDayPickCallback callback = new SingleDayPickCallback() {
    @Override
    public void onSingleDayPicked(PrimeCalendar singleDay) {
        // TODO
    }
};

// To show a date picker with Japanese dates, also today as the starting date
PrimeCalendar today = new JapaneseCalendar();  

PrimeDatePicker datePicker = PrimeDatePicker.Companion.dialogWith(today)
    .pickSingleDay(callback)
    .build();

datePicker.show(getSupportFragmentManager(), "SOME_TAG");

Builder Configurations

There are several builder functions applying relevant configurations on the date picker.


Function Picking Strategy
• minPossibleDate(minDate: PrimeCalendar) ALL
Specifies the minimum feasible date to be shown in date picker, which is selectable.
• maxPossibleDate(maxDate: PrimeCalendar) ALL
Specifies the maximum feasible date to be shown in date picker, which is selectable.
• firstDayOfWeek(firstDayOfWeek: Int) ALL
Specifies the day that should be considered as the start of the week. Possible values are: Calendar.SUNDAY, Calendar.MONDAY, etc.
• disabledDays(disabledDays: List<PrimeCalendar>) ALL
Specifies the list of disabled days, which aren't selectable.
• applyTheme(themeFactory: ThemeFactory) ALL
Specifies the theme.
• initiallyPickedSingleDay(pickedDay: PrimeCalendar) SingleDay
Specifies initially picked day when the date picker has just shown.
• initiallyPickedRangeDays(startDay: PrimeCalendar, endDay: PrimeCalendar) RangeDays
Specifies initially picked range of days when the date picker has just shown.
• autoSelectPickEndDay(autoSelect: Boolean) RangeDays
Specifies automatic selection of picking end day when the start day gets picked.
• initiallyPickedMultipleDays(pickedDays: List<PrimeCalendar>) MultipleDays
Specifies initially picked multiple days when the date picker has just shown.

Input Calendar Configurations

In addition to the builder functions, PrimeDatePicker receives some configurations from the input calendar. For example:

// shows a Persian calendar, but in English language, which leads to LTR direction
val calendar = PersianCalendar(Locale.ENGLISH).also {
    it.year = 1398                       // determines starting year
    it.month = 7                         // determines starting month
    it.firstDayOfWeek = Calendar.MONDAY  // sets first day of week to Monday
}

val datePicker = PrimeDatePicker.bottomSheetWith(calendar)
        ...
        .build()

Customizing Theme

PrimeDatePicker is fully customizable and you can tailor it to what you desire. Almost everything you see is customizable. For example:

  • text sizes & colors
  • background & element colors
  • padding & distances
  • font typeface
  • string formatter
  • calendar animations & transition parameters
  • etc

In this way, a set of customizable theme factory classes are provided to specify theme parameters. By default, there are two concrete subclasses for the them factory:

You can override their parameters, or inherit a class from, or make your own theme factory.

Here is an example of how to override theme parameters to customize it:

val themeFactory = object : LightThemeFactory() {

    override val typefacePath: String?
        get() = "fonts/Righteous-Regular.ttf"
    
    override val dialogBackgroundColor: Int
        get() = getColor(R.color.yellow100)

    override val calendarViewBackgroundColor: Int
        get() = getColor(R.color.yellow100)

    override val pickedDayBackgroundShapeType: BackgroundShapeType
        get() = BackgroundShapeType.ROUND_SQUARE

    override val calendarViewPickedDayBackgroundColor: Int
        get() = getColor(R.color.green800)
    
    override val calendarViewPickedDayInRangeBackgroundColor: Int
        get() = getColor(R.color.green400)

    override val calendarViewPickedDayInRangeLabelTextColor: Int
        get() = getColor(R.color.gray900)

    override val calendarViewTodayLabelTextColor: Int
        get() = getColor(R.color.purple200)

    override val calendarViewWeekLabelFormatter: LabelFormatter
        get() = { primeCalendar ->
            when (primeCalendar[Calendar.DAY_OF_WEEK]) {
                Calendar.SATURDAY,
                Calendar.SUNDAY -> String.format("%s😍", primeCalendar.weekDayNameShort)
                else -> String.format("%s", primeCalendar.weekDayNameShort)
            }
        }

    override val calendarViewWeekLabelTextColors: SparseIntArray
        get() = SparseIntArray(7).apply {
            val red = getColor(R.color.red300)
            val indigo = getColor(R.color.indigo500)
            put(Calendar.SATURDAY, red)
            put(Calendar.SUNDAY, red)
            put(Calendar.MONDAY, indigo)
            put(Calendar.TUESDAY, indigo)
            put(Calendar.WEDNESDAY, indigo)
            put(Calendar.THURSDAY, indigo)
            put(Calendar.FRIDAY, indigo)
        }

    override val calendarViewShowAdjacentMonthDays: Boolean
        get() = true

    override val selectionBarBackgroundColor: Int
        get() = getColor(R.color.brown600)

    override val selectionBarRangeDaysItemBackgroundColor: Int
        get() = getColor(R.color.orange700)
}

Using above theme, we can transform the light theme (left picture) to the right one.


Normal Light Theme Customized Light Theme

Java Theme Customization Example

BaseThemeFactory themeFactory = new LightThemeFactory() {
    
    @NotNull
    @Override
    public PrimeCalendarView.FlingOrientation getCalendarViewFlingOrientation() {
        return PrimeCalendarView.FlingOrientation.HORIZONTAL;
    }
    
    @Override
    public int getSelectionBarBackgroundColor() {
        return super.getColor(R.color.green300);
    }
    
    // Other customizations...
};

Customizing Texts

If you want to change some texts in PrimeDatePicker, such as a button text, the current solution is to define some strings in your project's strings.xml with equal name defined in the library's strings.xml, to override them.


Stand-Alone Views

To see how to use PrimeMonthView & PrimeCalendarView, refer to wiki page .


Change Log

The change log is available here.


License

Copyright 2019 Mohammad Amin Hassani.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].