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.
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.
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 fileapply 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? = nullfun setCalenderEventClickListener(eventClickListener: CalenderEventClickListener) {
this.eventClickListener = eventClickListener
}
interface CalenderEventClickListener {
fun onEventClick(eventItem: EventItem)
}
Now, Run your application and check it. It will look like this.
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…