CalendarView

Explicación del concepto de CalendarView.

Last updated 2 years ago

CalendarView

Explicación del concepto de CalendarView.

DEFINICIÓN

Hereda de:

Esta clase presenta un calendario para seleccionar fechas. El rango de fechas soportado por el calendario es configurable.

La apariencia exacta y la interacción concreta con esta View puede variar entre Versiones de Sistema Operativo y temas instalados en el equipo.

De manera general un usuario puede seleccionar una fecha pinchando en ella y puede moverse entre meses scroleando.

USO DESDE XML

<CalendarView
    android:id="@+id/cvEjemplo"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>
<TextView
    android:id="@+id/tvCalendar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Fecha Seleccionada: XX/XX/XXXX"/>

ATRIBUTOS

android:dateTextAppearance

Define la apariencia del texto que representa los números de los días en el calendario.

android:firstDayOfWeek

Representa el primer día de la semana de acuerdo con la clase java.util.Calendar.

Esta clase provee muchos métodos pero lo que nos interesa para este atributo concreto es como conseguir que el primer día de la semana sea Lunes y no Domingo.

Esto lo veremos más adelante, en el apartado Personalización.

android:focusedMonthDateColor

El color de la fecha que se encuentra seleccionada en el mes que tiene el foco.

android:maxDate

Define la fecha máxima que se puede mostrar en formato MM/DD/YYYY.

android:minDate

Define la fecha mínima que se puede mostrar en formato MM/DD/YYYY.

android:SelecetedDateVerticalBar

Define el drawable de las barras verticales que se muestran al inicio y al final de la fecha elegida.

android:selectedWeekBackgroundColor

Define el color de fondo de la semana elegida.

android:showWeekNumber

Define si se muestra el número de la semana o no.

android:shownWeekCount

Define el número de semanas que se van a mostrar.

android:unfocusedMonthDateColor

El color de la fecha que se encuentra seleccionada en el mes que NO tiene el foco.

android:weekDayTextAppearance

Define la apariencia del texto que representa las iniciales de los días de la semana en el calendario.

android:weekNumberColor

Define el color del número de semana.

android:weekSeparatorLineColor

Define el color de la linea que separa las semanas.

PERSONALIZACIÓN

Definir un Listener

Lo más importante de un CalendarView es ser capaz de ejecutar código al seleccionar una fecha. En este caso, podemos definir un Listener del tipo setOnDateChangeListener(CalendarView, year, month, day).

package com.example.android.appdeejemplo

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.CalendarView
import android.widget.TextView


class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val cvEjemplo = findViewById<CalendarView>(R.id.cvEjemplo)
        val tvCalendar = findViewById<TextView>(R.id.tvCalendar)

        cvEjemplo.setOnDateChangeListener { cv, year, month, day ->
            var date = "$day/${month+1}/$year"
            tvCalendar.text = "Fecha Seleccionada: $date"
        }
    }
}

Es importante tener en cuenta que el mes se maneja como un Array y por lo tanto, los meses van de 0 a 11 a nivel interno.

Definir limitaciones en el Calendario

En ocasiones, las opciones del calendario se deben limitar para mejorar la experiencia de usuario.

Por ejemplo, si hay que coger un tren de ida y otro de vuelta, la fecha de regreso no puede ser menor que la de ida. Tampoco se puede reservar un tren anterior a la fecha de hoy ni dentro de un año y medio.

Todo esto, hemos visto que se puede limitar desde XML con atributos, pero lo ideal es limitarlo dinámicamente desde código.

Para hacer esto, hacemos lo siguiente:

val calendar = Calendar.getInstance()

Generamos una variable que almacene el día de hoy, ayudados por la instancia de Calendar(), y la almacenamos en el atributo minDate:

val today = calendar.timeInMillis
cvEjemplo.minDate = today

Seteamos la instancia de Calendar() en el último día permitido (en este caso el 31/12/2023).

calendar.set(2023, 11, 31)

Generamos una variable que almacene el último día permitido, ayudados por la instancia de Calendar(), y la almacenamos en el atributo maxDate:

val lastDay = calendar.timeInMillis
cvEjemplo.maxDate = lastDay

Como vemos arriba, es fundamental mostrar las fechas en milisegundos.

Esta es la forma estandarizada de referirse a las fechas en computación, se denomina tiempo Epoch o tiempo UNIX y referencia exactamente a los milisegundos que han pasado desde el 1 de enero de 1970.

Para iOS el tiempo Epoch comienza desde el 1 de enero de 1904.

Para Microsoft el tiempo Epoch comienza desde el 1 de enero de 1601.

Normalmente se utiliza de manera estandarizada el tiempo UNIX.

De esta manera el código queda como sigue:

package com.example.android.appdeejemplo

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.CalendarView
import android.widget.TextView
import java.util.Calendar


class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val cvEjemplo = findViewById<CalendarView>(R.id.cvEjemplo)
        val tvCalendar = findViewById<TextView>(R.id.tvCalendar)

        cvEjemplo.setOnDateChangeListener { cv, year, month, day ->
            var date = "$day/${month+1}/$year"
            tvCalendar.text = "Fecha Seleccionada: $date"
        }

        val calendar = Calendar.getInstance()

        val today = calendar.timeInMillis
        cvEjemplo.minDate = today

        calendar.set(2023, 11, 31)
        val lastDay = calendar.timeInMillis
        cvEjemplo.maxDate = lastDay

    }
}

Cambiar primer día de la semana

Como vemos en los ejemplos superiores, el primer día de la semana está referenciado como Domingo mientras que en España, por ejemplo, se empiezan a contar (de manera general) desde el lunes.

Para cambiar esto, vamos a modificar el valor de android:firstDayOfWeek desde código, sin embargo, se va a tener que realizar un calculo concreto:

cvEjemplo.firstDayOfWeek = (cvEjemplo.firstDayOfWeek + 1) % 7

PreviousVideoView NextProgressBar

Last updated 2 years ago