Implementing Material Designed Event Calender Part-3

Hello all, we’ve created out Material Designed Event Calender. Now we’ll implement it in our activity / fragment to use it in our application.

If you’ve not gone through Part-1 and Part-2 of this tutorial, Please use the below link to create custom Material Designed Event Calender.

Creating Material Designed Event Calender Part-1

Creating Material Designed Event Calender Part-2

Now, Create an Activity in an app and in layout for it named as activity_main.xml , write below code.

<com.example.CalenderView
    android:id="@+id/calender_event"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Above code will show preview like image below.

CalenderView XML Preview in Android Studio

Now, Write code for adding events in CalenderView as below named Activity as MainActivity.kt. To use XML defined component directly without using findViewById, write below code in build.gradle files.

//Project level build.gradle 
dependencies {
    ...
    classpath "org.jetbrains.kotlin:kotlin-android-extensions:$kotlin_version"
}
//app level build.gradle, at the very bottom, end of file
apply plugin: 'kotlin-android-extensions'

In MainActivity.kt, you can use now component directly as name of given id in xml file.

import kotlinx.android.synthetic.main.activity_main.*
...
class MainActivity : AppCompatActivity() {
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        calender_trip.setCalenderEventClickListener(object :    CalenderView.CalenderEventClickListener {
    
        override fun onEventClick(eventItem: EventItem) {
                //Perform your code here using eventItem 
            }
        })
       addSomeEvents()
    }
}

Now, we’ll add events in calender and it will display on calender.

fun addSomeEvents() {
    val eventList = ArrayList<EventItem>()
val event1 = EventItem("22-01-2018","01-02-2018","Company Holidays")
    val event2 = EventItem("14-01-2018","16-01-2018","Kite Festivals","#E87E04")
    val event3 = EventItem("25-12-2017","01-01-2018","Christmas Holidays","#F44336")
    val event4 = EventItem("05-02-2018","14-02-2018","Cousin Wedding","#FFC400")
    val event5 = EventItem("07-02-2018","014-02-2018","Not Free","#524b7e")
    val event6 = EventItem("15-02-2018","28-02-2018","Normal Meetings")
    eventList.add(event1)
    eventList.add(event2)
    eventList.add(event3)
    eventList.add(event4)
    eventList.add(event5)
    eventList.add(event6)
    calender_event.addEventList(eventList)
}

Now, Create CalenderEventClickListener interface for clicking on event and perform the code. Create this interface in CalenderView class file and also define method to set it from Activity.

var eventClickListener: CalenderEventClickListener? = null
fun setCalenderEventClickListener(eventClickListener: CalenderEventClickListener) {
    this.eventClickListener = eventClickListener
}

interface CalenderEventClickListener {
    fun onEventClick(eventItem: EventItem)
}

Now, Run your application and check it. It will look like this.

CalenderView after Adding Events

That’s all. you have created an awesome calender which can show multiple events with range of the dates with different colors and effects. That’s very very awesome.

You can also create your custom methods to set dynamic background color of header, text color of Month title and change maximum limit of 3 Days of showing max. events per week.

Thank you for giving your valuable time to read this article and use this code. If you liked this tutorial, Please give 1, 2, 5 or 50 claps for this article. Enjoy this tutorial and follow me and this publication to get such amazing code updates. Thanks for your Support again…