Skip to content

Latest commit

 

History

History
239 lines (201 loc) · 7.03 KB

README.md

File metadata and controls

239 lines (201 loc) · 7.03 KB
Raw

CalendarView

A simple library which gives you custom design CalendarView with dialog functionality and event handlers.

1: CalendarView

Demo Screen

1.1: Import Library

implementation 'com.github.shahzadafridi:CalenderView:1.1.5'

Method A

1.2: XML File

<com.shahzadafridi.calendarview.CalendarView
        android:id="@+id/calendar_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

1.3: Kotlin Code

  var selectedDate = Calendar.getInstance()
  var calendarView = findViewBydId(R.id.calendar_view)

  calendarView.builder()
      .withYearPanel(
          dateFormat = "yyyy",
          textColor = R.color.greyed_out,
          textSize = 42f,
          font = R.font.titillium_web_semibold
      )
      .withBackButton(
          isShow = true,
          background = R.drawable.ic_up_round
      )
      .withMonthPanel(
          font = R.font.titillium_web_semibold,
          textSize = 20f,
          selectedTextColor = R.color.black,
          unSelectedTextColor = R.color.greyed_out,
          background = R.color.white,
          months = months
      )
      .withWeekPanel(
          font = R.font.titillium_web_semibold,
          textColor = R.color.black,
          textSize = 14f,
          background = R.color.white,
          weekDays = weekDays
      )
      .withDayPanel(
          font = R.font.titillium_web_semibold,
          textColor = R.color.black,
          textSize = 16f,
          selectedTextColor = R.color.white,
          selectedBackground = R.drawable.ic_green_oval,
          background = R.color.white
      )
      .withCalenderViewBg(
          background = R.drawable.rect_lr_wround_bg
      )
      .withUpdateSelectDate(selectedDate!!) //It's required when using kotlin Instead of XML Configuration.
      .withEvents(
          events = events,
          eventDotColor = R.color.green
      )
      .buildCalendar()

Extra

You can set margin of Year, Month, Week and Day panel/section.

      .withYearPanleMargin(
         top = 12,
         bottom = 15,
         left = 12,
         right = 12
      )
      .withMonthPanleMargin(
         top = 12,
         bottom = 15,
         left = 12,
         right = 12
      )
      .withWeekPanelMargin(
         top = 12,
         bottom = 15,
         left = 12,
         right = 12
      )
      .withDayPanelMargin(
         top = 12,
         bottom = 15,
         left = 12,
         right = 12
      )

OR

Method B

1.2: XML File

    <com.shahzadafridi.calendarview.CalendarView
        android:id="@+id/calendar_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:is_back_button_show="true"
        app:back_button_bg="@drawable/ic_up_round"
        app:year_date_Formate="MM YYYY"
        app:year_text_font="@font/titillium_web_semibold"
        app:year_text_clr="@color/cblack"
        app:year_text_size="12dp"
        app:month_txt_size="8dp"
        app:month_font="@font/titillium_web_semibold"
        app:month_unselect_txt_clr="@color/white"
        app:month_selected_txt_clr="@color/green"
        app:month_bg="@color/black"
        app:week_font="@font/titillium_web_semibold"
        app:week_bg_clr="@color/black"
        app:week_txt_clr="@color/white"
        app:week_txt_size="6dp"
        app:day_bg="@color/white"
        app:day_select_bg="@drawable/ic_green_oval"
        app:day_text_size="5dp"
        app:day_select_txt_clr="@color/white"
        app:day_txt_clr="@color/cblack"
        app:day_font="@font/titillium_web_semibold"
        app:cv_bg="@drawable/rect_lr_wround_bg"/>

1.3: Kotlin Code

  var calendarView = findViewBydId(R.id.calendar_view)

  calendarView.builder()
      .withEvents(events, R.color.green)
      .buildCalendar()

1.4: CalendarView Event Handles

calendarView.setEventHandler(object : CalenderViewInterface.EventHandler {

    override fun onDayClick(view: View?, date: Date, position: Int) {
        val df = SimpleDateFormat.getDateInstance()
        //Required for selected date background. Ignore If you are using XML configuration.
        selectedDate = Calendar.getInstance().apply {
           time = date
        }
        Toast.makeText(this@MainActivity, df.format(date), Toast.LENGTH_SHORT).show()
        Log.e("TEST", "onDayClick")
    }

    override fun onDayLongClick(view: View?, date: Date, position: Int) {
        val df = SimpleDateFormat.getDateInstance()
        Toast.makeText(this@MainActivity, df.format(date), Toast.LENGTH_SHORT).show()
        Log.e("TEST", "onDayLongClick")
    }

    override fun onBackClick(view: View?) {
        Log.e("TEST", "onBackClick")
        dialog?.dismiss()
    }

    override fun onMonthClick(view: View?, month: String, position: Int) {
        Toast.makeText(this@MainActivity, month, Toast.LENGTH_SHORT).show()
        Log.e("TEST", "onMonthClick")
    }
})

2: CalendarViewDialog

Demo Screen

2.1: Kotlin Code

        var dialog = CalendarViewDialog(this) // this is context
        dialog!!.setCancelable(false)
        dialog!!.show()
        var calendarView = dialog!!.getCalendarView()
        // Follow 1.3 Step. It is same configuration.

Methods Info

  • withYearPanel can change Date formate, Text Color, Text Size, Text Font
  • withBackButton can close CalendarView with Back Button
  • withMonthPanel can change the month Text font, Text Size, Selected Text Color, Unselected Text Color, month names, Background of month layout
  • withWeekPanel can change the week days Text font, Text Color, Text Size,days name, Background of week layout
  • withDayPanel can change the day Text font, Text Color, Text Size, Selected background, Selected Text Color, Background of day
  • withCalenderViewBg can change the CalendarView background
  • withEvents can gives events dates to calendarView which shows small dot indcaotr below of day
  • withUpdateSelectDate This method will change the background color of selected date. It's required when using Kotlin code instead of XML configuration

Watch Demo Video

Logo

Click me: @realtimecoding

You can subscribe the channel for more android related stuffs as I am planning to work on android tutorials.

Contributing

Pull requests are welcomed!

License

MIT