prolificinteractive / material-calendarview

A Material design back port of Android's CalendarView
https://prolificinteractive.github.io/material-calendarview/
MIT License
5.91k stars 1.32k forks source link

Clarification: Can I able to show the events of a particular day using this calendar #1075

Open nihp opened 3 years ago

nihp commented 3 years ago

Need to show the calendar events. Can I able to show the events using material calendarview

XanderZehcnas commented 3 years ago

You can mark the days with events with a specific decorator. See the documentation about daydecorators.

nihp commented 3 years ago

@XanderZehcnas Can you let me know shall I able to show the dates and header of the calendar in a different color and custom style for this calendar view

XanderZehcnas commented 3 years ago

You can highlight a day with a color dot (This is what I have implemented) or you can create your own decorator (or so it seems) You can for example use a dot Decorator like this:

class CalendarEventDecorator(private val color: Int, private val dates: Collection<CalendarDay?>?): DayViewDecorator {

override fun shouldDecorate(day: CalendarDay): Boolean {
    return dates!!.contains(day)
}

override fun decorate(view: DayViewFacade) {
    view.addSpan(DotSpan(5F, color))
}

}

This decorator can then be applied to a set of dates. In my case I observe a list of CalendarDay (The class used within this library) to incorporate the decorators:

viewModel.reservedDates.observe(viewLifecycleOwner, Observer {reservedDates-> if (reservedDates != null) { calendarView.removeDecorators() calendarView.addDecorator( CalendarEventDecorator(ContextCompat.getColor(requireContext(),R.color.primaryColor),reservedDates.filter{ it.isInRange(calendarView.minimumDate,calendarView.maximumDate) })) } else { calendarView.removeDecorators() } })

nihp commented 3 years ago

@XanderZehcnas Thanks for your detailed explanation.

Can I able to set background for this https://i.stack.imgur.com/Z16zO.png. Now I have the header and calendar in a same color. But I need to show the calendar background header as blue and calendar dates background as white

XanderZehcnas commented 3 years ago

I don't see a specific attributes for that. I have a round white background for the whole calendar.

You may do it by having a layout behind the calendar with two views one for the top background and another for the rest and distribute their heights accordingly. But it is not very elegant this way.

El mar., 17 nov. 2020 a las 13:02, nihp (notifications@github.com) escribió:

@XanderZehcnas https://github.com/XanderZehcnas Thanks for your detailed explanation.

Can I able to set background for this https://i.stack.imgur.com/Z16zO.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/prolificinteractive/material-calendarview/issues/1075#issuecomment-728881756, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHHPLIM5PPZUCCL3R7H3Z6TSQJQ4BANCNFSM4TK7P2XQ .

nihp commented 3 years ago

@XanderZehcnas Thanks for reply.

My Calendar is inside a LinearLayout. How can I add two view for this?

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

<!-- Add TextView to display the date -->
<!-- Add CalenderView to display the Calender -->
    <com.prolificinteractive.materialcalendarview.MaterialCalendarView
        android:id="@+id/calendar_view"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_marginTop="50dp"
        android:layout_gravity="center"
        app:mcv_selectionColor="#00ADEC"
        android:background="@drawable/calendar_background"
        app:mcv_showOtherDates="defaults"/>
</LinearLayout>
XanderZehcnas commented 3 years ago

Put it on a Constraint Layout and add the views there also before the calendar:

<androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/constraintCalendar" android:layout_width="match_parent" android:layout_height="0dp" android:background="@drawable/round_back_shape" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.0">

        <View
                android:id="@+id/view1"
                android:background="@drawable/top_background"
                ... />

         <View
                android:id="@+id/view2"
                android:background="@drawable/bottom_background"
                ... />

        <com.prolificinteractive.materialcalendarview.MaterialCalendarView
                android:id="@+id/calendarView"
                android:layout_width="match_parent"
                android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
                ... />
    </androidx.constraintlayout.widget.ConstraintLayout>

You will need to connect both views. But I don't know how will it fit the calendar heights for the days and titles. You may need to test it on different screeens for sure. El mar., 17 nov. 2020 13:45, nihp notifications@github.com escribió:

@XanderZehcnas https://github.com/XanderZehcnas Thanks for reply.

My Calendar is inside a LinearLayout. How can I add two view for this?

<com.prolificinteractive.materialcalendarview.MaterialCalendarView android:id="@+id/calendar_view" android:layout_width="300dp" android:layout_height="300dp" android:layout_marginTop="50dp" android:layout_gravity="center" app:mcv_selectionColor="#00ADEC" android:background="@drawable/calendar_background" app:mcv_showOtherDates="defaults"/>

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/prolificinteractive/material-calendarview/issues/1075#issuecomment-728903783, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHHPLILXSJ7XUAHB4VU5FXTSQJV5DANCNFSM4TK7P2XQ .

nihp commented 3 years ago

Okay thanks I will add the above inside the Constraint Layout. Will check.

nihp commented 3 years ago

It shows an empty screen. Why the layout_height is 0dp? Can you please elaborate it?

If I make the layout_height to any value it will show the calendar with the background which I set for the entire one @drawable/round_back_shape.

nihp commented 3 years ago

I need like the below image. I think the splitting of views not works. Screenshot 2020-11-18 at 1 59 41 PM

rafsanjani commented 3 years ago

@nihp Just put the calendar inside a MaterialCardView and set the cornerRadius of the cardview to something like 15dp