Horizontal Calendar Using Recylerview Android

Create custom horizontal calendar using simple recyclerview in android using kotlin

Simple horizontal calendar using recyclerview

As you can see in the above image, we are going to create same horizontal calendar in simple way. So, let’s start

Let’s create a layout

Let’s start with creating layout

We need back arrow “<” for previous
“>” next arrow for next month
Text for showing the current selected month
And Last the recyclerview for showing the dates

Then we will be creating a row layout means recyclerview adapter layout which will have Day and Date in Text
With using built in style for text and fixed height & width

Now let’s create MainActivity.kt, In this we will have our main code

First let’s get the current calendar date list which we need to use, For that we will need variable of Calendar instance, ArrayList and SimpleDateFormat

private val sdf = SimpleDateFormat(“MMMM yyyy”, Locale.ENGLISH) private val cal = Calendar.getInstance(Locale.ENGLISH) 
private val currentDate = Calendar.getInstance(Locale.ENGLISH) private val dates = ArrayList<Date>()

Now we will Create a POJO class or you can Say Data Class to Store the Dates in format

data class CalendarDateModel(var data: Date)

Now we have to get current date list

private fun setUpCalendar() {
    val calendarList = ArrayList<CalendarDateModel>()
    binding.tvDateMonth.text = sdf.format(cal.time)
    val monthCalendar = cal.clone() as Calendar
    val maxDaysInMonth = cal.getActualMaximum(Calendar.DAY_OF_MONTH)
    dates.clear()
    monthCalendar.set(Calendar.DAY_OF_MONTH, 1)
    while (dates.size < maxDaysInMonth) {
        dates.add(monthCalendar.time)
        calendarList.add(CalendarDateModel(monthCalendar.time))
        monthCalendar.add(Calendar.DAY_OF_MONTH, 1)
    }
    calendarList2.clear()
    calendarList2.addAll(calendarList)
    adapter.setData(calendarList)
}

In the above code we will get list of date of current month, Let’s understand how

This provides you current calendar month and year
sdf.format(cal.time)

// This code will get maximum no. of days in the current month
cal.getActualMaximum(Calendar.DAY_OF_MONTH)   

Now we will set the current calendar month fro where we need to start

monthCalendar.set(Calendar.DAY_OF_MONTH, 1)

Now we will use the while loop, to store all the dates in array
And this loop will continue until the size of maximum days in current month

while (dates.size < maxDaysInMonth) {
        dates.add(monthCalendar.time)
        calendarList.add(CalendarDateModel(monthCalendar.time))
        monthCalendar.add(Calendar.DAY_OF_MONTH, 1)
    }

And after adding the current month 1st day date, we will require next day date, For that we will add 1 more day to the calendar

monthCalendar.add(Calendar.DAY_OF_MONTH, 1)

And the while loops continue to add the dates in the array list and as soon as we collect it we will create a recyclerview adapter to show that data

class CalendarAdapter :
    RecyclerView.Adapter<CalendarAdapter.MyViewHolder>() {
    private val list = ArrayList<CalendarDateModel>()

    inner class MyViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        fun bind(calendarDateModel: CalendarDateModel) {
            val calendarDay = itemView.findViewById<TextView>(R.id.tv_calendar_day)
            val calendarDate = itemView.findViewById<TextView>(R.id.tv_calendar_date)
            val cardView = itemView.findViewById<CardView>(R.id.card_calendar)

            calendarDay.text = calendarDateModel.calendarDay
            calendarDate.text = calendarDateModel.calendarDate
            cardView.setOnClickListener {
                listener.invoke(calendarDateModel, adapterPosition)
            }
        }

    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        val view =
            LayoutInflater.from(parent.context).inflate(R.layout.row_calendar_date, parent, false)
        return MyViewHolder(view)
    }

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        holder.bind(list[position])
    }

    override fun getItemCount(): Int {
        return list.size
    }

    fun setData(calendarList: ArrayList<CalendarDateModel>) {
        list.clear()
        list.addAll(calendarList)
        notifyDataSetChanged()
    }
}

Now we are ready to run and check the code
you will get the list of current month calendar dates list

After that we need next and previous month on the click of the arrow
So here we just have to add 1 month and -1 month from the current calendar
Like this

binding.ivCalendarNext.setOnClickListener {
    cal.add(Calendar.MONTH, 1)
    setUpCalendar()
}
binding.ivCalendarPrevious.setOnClickListener {
    cal.add(Calendar.MONTH, -1)
    setUpCalendar()
}

Now our code is completely ready to work for getting dates in the recyclerview of current month, next month and previous months

I hope you learned something and It will be useful to you
If you have any questions then let me know in the comments
Below is the link of the project for reference

Tejas-Soni/HorizontalCalendarAndroid