Compartir a través de

Información de referencia sobre la plantilla de pantalla de calendario para aplicaciones de lienzo

  • Artículo

En el caso de las aplicaciones de lienzo en Power Apps, comprenda cómo cada control significativo de la plantilla de pantalla de calendario contribuye a la funcionalidad general predeterminada de la pantalla. Esta inmersión profunda presenta las fórmulas de comportamiento y los valores de otras propiedades que determinan cómo responden los controles a la entrada del usuario. Para una discusión de alto nivel de la funcionalidad predeterminada de esta pantalla, consulte el resumen de la pantalla del calendario.

Este tema resalta algunos controles significativos y explica las expresiones o fórmulas a las que se aplican varias propiedades (como Items y OnSelect) de estos controles:

Requisito previo

Familiaridad con cómo agregar y configurar pantallas y otros controles a medida que crea una aplicación en Power Apps.

Menú desplegable de calendario

Control dropdownCalendarSelection.

  • Propiedad: Items
    Valor: Office365.CalendarGetTables().value

    Este valor es una operación de conector que recupera los calendarios de Outlook del usuario de la aplicación. Puede ver el valor que recupera esta operación.

  • Propiedad: OnChange
    Valor: Select(dropdownCalendarSelection)

    Cuando el usuario selecciona una opción de la lista, se ejecuta la función en la propiedad OnSelect del control.

  • Propiedad: OnSelect
    Valor: una función If, que aparece en el siguiente bloque de código, y varias funciones adicionales, que aparecen en el bloque de código después de eso.

    Esta parte de la fórmula se ejecuta solo la primera vez que el usuario selecciona una opción en la lista desplegable después de abrir la aplicación:

    If( IsBlank( _userDomain ),
    UpdateContext( {_showLoading: true} );
    Set( _userDomain, Right( User().Email, Len( User().Email ) - Find( "@", User().Email ) ) );
    Set( _dateSelected, Today() );
    Set( _firstDayOfMonth, DateAdd( Today(), 1 - Day( Today() ), Days ) );  
    Set( _firstDayInView, DateAdd( _firstDayOfMonth, -(Weekday(_firstDayOfMonth) - 1), Days ) );
    Set( _lastDayOfMonth, DateAdd( DateAdd( _firstDayOfMonth, 1, Months ), -1, Days ) )  
);

    El código anterior define las siguientes variables:

    • _userDomain: El dominio de la empresa del usuario de la aplicación, tal como se refleja en la dirección de correo electrónico del usuario.
    • _dateSelected: Fecha actual (predeterminada). La galería de calendario resalta esta fecha, y la galería de eventos muestra los eventos programados para esa fecha.
    • _firstDayOfMonth: El primer día del mes actual. Como (Today + (1 - Today)) = Today - Today + 1 = 1, esta función DateAdd siempre devuelve el primer día del mes.
    • _firstDayInView: El primer día que puede mostrar la galería del calendario. Este valor no es el mismo que el primer día del mes a menos que el mes comience un domingo. Para evitar mostrar una semana completa del mes anterior, el valor de _firstDayInView es _firstDayOfMonth - Weekday(_firstDayOfMonth) + 1.
    • _lastDayOfMonth: El último día del mes actual, que es el mismo que el primer día del mes siguiente, menos un día.

    Las funciones después de la función If se ejecutan cada vez que el usuario selecciona una opción en la lista desplegable del calendario (no solo la primera vez que el usuario abre la aplicación):

    Set( _calendarVisible, false );
UpdateContext( {_showLoading: true} );
Set( _myCalendar, dropdownCalendarSelection2.Selected );
Set( _minDate, 
    DateAdd( _firstDayOfMonth, -(Weekday( _firstDayOfMonth ) - 2 + 1), Days )
);
Set(_maxDate, 
    DateAdd(
        DateAdd( _firstDayOfMonth, -(Weekday( _firstDayOfMonth ) - 2 + 1), Days ), 
        40, 
        Days
    )
);
ClearCollect( MyCalendarEvents, 
    Office365Outlook.GetEventsCalendarViewV2( _myCalendar.Name, 
        Text( _minDate, UTC ), 
        Text( _maxDate, UTC )
    ).value
);
UpdateContext( {_showLoading: false} );
Set( _calendarVisible, true )

    El código anterior define estas variables y una colección:

    • _calendarVisible: ajustado a false para que el calendario no aparezca mientras se carga la nueva selección.
    • _showLoading: ajustado a true para que aparezcan los indicadores de carga mientras se carga la nueva selección.
    • _myCalendar: ajustado al valor actual del control calendario desplegable para que se recuperen los eventos del calendario correcto.
    • _minDate: ajustado al mismo valor que _firstDayInView. Esta variable determina qué eventos ya se recuperaron de Outlook y se almacenaron en caché en la aplicación.
    • _maxDate: Establezca el último día visible en el calendario. La fórmula es _firstDayInView + 40. El calendario muestra un máximo de 41 días, por lo que la variable _maxDate siempre refleja el último día visible y determina qué eventos ya se recuperaron de Outlook y se almacenaron en caché en la aplicación.
    • MyCalendarEvents: Se establece en una colección de eventos del usuario del calendario seleccionado, que va desde _minDate a _maxDate.
    • _showLoading: ajustado a false; _calendarVisible se establece en true después de que todo lo demás se haya cargado.

Propiedades de color

Para conocer las propiedades generales del color, consulte Propiedades de color y borde en Power Apps.

Propiedades de color únicas para el control desplegable del calendario:

  • ChevronBackground: color de fondo para el calendario desplegable.
  • ChevronDisabledBackground: color de fondo para el calendario desplegable deshabilitado.
  • ChevronFill: color de relleno para el calendario desplegable.
  • ChevronDisabledFill: color de relleno para el calendario desplegable deshabilitado.
  • ChevronHoverBackground: color de fondo del calendario desplegable cuando el usuario mantiene el puntero del mouse sobre él.
  • ChevronHoverFill: color de relleno del calendario desplegable cuando el usuario mantiene el puntero del mouse sobre él.

Icono del calendario

Control iconCalendar.

  • Propiedad: OnSelect
    Valor: cuatro funciones Establecer que restablecen la galería del calendario a la fecha actual:

    Set( _dateSelected, Today() );
Set( _firstDayOfMonth, DateAdd( Today(), 1 - Day( Today() ), Days) );
Set( _firstDayInView, DateAdd(_firstDayOfMonth, -(Weekday( _firstDayOfMonth ) - 2 + 1), Days));
Set( _lastDayOfMonth, DateAdd( DateAdd( _firstDayOfMonth, 1, Months ), -1, Days ) )

    El código anterior restablece todas las variables de fecha que son necesarias para mostrar la vista de calendario adecuada:

    • _dateSelected se restablece a hoy.
    • _firstDayOfMonth se restablece al primer día del mes de hoy.
    • _firstDayInView se restablece al primer día visible cuando se selecciona el mes de hoy.
    • _lastDayOfMonth se restablece al último día del mes de hoy.

    La sección Calendario desplegable de este tema explica estas variables con más detalle.

Contenido adicional de mes anterior

Control iconPrevMonth.

  • Propiedad: OnSelect
    Valor: cuatro funciones Establecer y una función If que muestra el mes anterior en la galería del calendario:

    Set( _firstDayOfMonth, DateAdd( _firstDayOfMonth, -1, Months ) );
Set( _firstDayInView, 
    DateAdd( _firstDayOfMonth, -(Weekday( _firstDayOfMonth ) - 2 + 1), Days )
);
Set( _lastDayOfMonth, DateAdd(DateAdd( _firstDayOfMonth, 1, Months ), -1, Days ) );
If( _minDate > _firstDayOfMonth,
    Collect( MyCalendarEvents,
        Office365Outlook.GetEventsCalendarViewV2( _myCalendar.Name,
            Text( _firstDayInView, UTC ), 
            Text( DateAdd( _minDate, -1, Days ), UTC )
        ).value
    );
    Set( _minDate, _firstDayInView )
)

    Nota

    Las definiciones para _firstDayOfMonth, _firstDayInView y _lastDayOfMonth son casi idénticas a las de la sección de calendario desplegable de este tema.

    Las primeras tres líneas del código anterior se ejecutan cada vez que el usuario selecciona el contenido adicional de mes anterior. El código establece las variables que son necesarias para mostrar la vista de calendario adecuada. El código restante solo se ejecuta si el usuario no ha seleccionado previamente este mes para el calendario seleccionado.

    Si es así, _minDate es el primer día que aparece cuando se muestra el mes anterior. Antes de que el usuario seleccione el icono, _minDate tiene un valor mínimo posible del 23 del mes actual. (Si el 1 de marzo cae en sábado, _firstDayInView para marzo es el 23 de febrero.) Eso significa que si un usuario aún no ha seleccionado este mes, _minDate es mayor que el nuevo _firstDayOfMonth, y la función If devuelve true. Se ejecuta el código y se actualizan una colección y una variable:

    • MyCalendarEvents recupera eventos del calendario seleccionado con la operación Office365Outlook.GetEventsCalendarViewV2. El intervalo de fechas se encuentra entre la fecha _firstDayInView y _minDate - 1. Como MyCalendarEvents ya contiene eventos en la fecha _minDate, 1 se resta de esa fecha para el valor máximo en este nuevo rango de fechas.

    • _minDate se establece en la _firstDayInView actual, ya que esta es la primera fecha para la que se recuperaron eventos. Si un usuario vuelve a esta fecha seleccionando el contenido adicional de mes anterior, la función If vuelve a false; el código no se ejecuta porque los eventos para esta vista ya están almacenados en caché en MyCalendarEvents.

Contenido adicional de mes siguiente

Control iconNextMonth.

  • Propiedad: OnSelect
    Valor: cuatro funciones Establecer y una función If que muestra el mes siguiente en la galería del calendario:

    Set( _firstDayOfMonth, DateAdd( _firstDayOfMonth, 1, Months ) );
Set( _firstDayInView, 
    DateAdd( _firstDayOfMonth, -(Weekday( _firstDayOfMonth ) - 2 + 1), Days ) );
Set( _lastDayOfMonth, DateAdd( DateAdd( _firstDayOfMonth, 1, Months ), -1, Days ) );
If(_maxDate < _lastDayOfMonth, 
Collect(MyCalendarEvents,
        Office365Outlook.GetEventsCalendarViewV2(_myCalendar.Name,
            Text(DateAdd(_maxDate, 1, Days), UTC),
            Text(DateAdd(_firstDayInView, 40, Days))
        ).value
);
Set(_maxDate, DateAdd(_firstDayInView, 40, Days))
)

    Nota

    Las definiciones para _firstDayOfMonth, _firstDayInView y _lastDayOfMonth son casi idénticas a las de la sección de calendario desplegable de este tema.

    Las primeras tres líneas del código anterior, que se ejecutan cuando el usuario selecciona el contenido adicional de mes siguiente, establecen las variables que son necesarias para mostrar la vista de calendario adecuada. El código restante solo se ejecuta si el usuario no ha seleccionado previamente este mes para el calendario seleccionado.

    Si es así, _maxDate es el último día que aparece cuando se muestra el mes anterior. Antes de que el usuario seleccione el contenido adicional de mes siguiente, _maxDate tiene un valor máximo posible del 13 del mes siguiente. (Si el 1 de febrero cae en domingo de año no bisiesto, _maxDate es el 13 de marzo, que es _firstDayInView + 40 días.) Eso significa que si un usuario aún no ha seleccionado este mes, _maxDate es mayor que el nuevo _lastDayOfMonth, y la función If devuelve true. Se ejecuta el código y se actualizan una colección y una variable:

    • MyCalendarEvents recupera eventos del calendario seleccionado con la operación Office365Outlook.GetEventsCalendarViewV2. El intervalo de fechas se encuentra entre _maxDate + 1 día y _firstDayInView + 40 días. Como MyCalendarEvents ya contiene eventos en la fecha _minDate, 1 se suma a esa fecha para el valor mínimo en este nuevo rango de fechas. _firstDayInView + 40 es la fórmula para _maxDate, así que la segunda fecha en el rango es solo la nueva _maxDate.

    • _maxDate se establece en la _firstDayInView + 40 días, ya que esta es el último día para el que se recuperaron eventos. Si un usuario vuelve a esta fecha seleccionando el contenido adicional de mes siguiente, la función If vuelve a false; el código no se ejecuta porque los eventos para esta vista ya están almacenados en caché en MyCalendarEvents.

Galería de calendario

Control MonthDayGallery.

  • Propiedad: Items
    Valor: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19, 20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41]

    El conjunto de 0 a 41 se usa para los elementos en la galería del calendario ya que, en el peor de los casos, la vista del calendario tendrá que mostrar 42 días completos. Esto ocurre cuando el primer día del mes es un sábado y el último un domingo. En este caso, el calendario muestra seis días del mes anterior en la fila que contienen el primero del mes y seis días del mes siguiente en la fila que contiene el último del mes. Se trata de 42 valores únicos, de los cuales 30 son para el mes seleccionado.

  • Propiedad: WrapCount
    Valor: 7

    Este valor refleja una semana de siete días.

Control Title en la galería del calendario

Control de título MonthDayGallery.

  • Propiedad: Text
    Valor: Day( DateAdd( _firstDayInView, ThisItem.Value, Days ) )

    Recordar que _firstDayInView se define como (_firstDayOfMonth - su valor del día de la semana) + 1. Esto indica que _firstDayInView siempre es domingo y _firstDayOfMonth siempre está en la primera fila de MonthDayGallery. Debido a estos dos hechos, _firstDayInView siempre está en la primera celda de MonthDayGallery. ThisItem.Value es el número de esa celda en la propiedad de artículo MonthDayGallery. Entonces, si tomamos _firstDayInView como punto de partida, cada celda muestra el incremento de _firstDayInView + su valor de celda respectivo.

  • Propiedad: Fill
    Valor: una función If:

    If( DateAdd( _firstDayInView, ThisItem.Value ) = Today() && 
            DateAdd( _firstDayInView, ThisItem.Value ) = _dateSelected, 
        RGBA( 0, 0, 0, 0 ),
    DateAdd( _firstDayInView, ThisItem.Value) = Today(), 
        ColorFade( Subcircle.Fill, 0.67 ),
    Abs( Title.Text - ThisItem.Value) > 10,
        RGBA( 200, 200, 200, 0.3 ),
    RGBA( 0, 0, 0, 0 )
)

    Como se discutió en la descripción de la propiedad Text, DateAdd(_firstDayInView, ThisItem.Value) representa el día en la celda visible. Teniendo esto en cuenta, el código anterior realiza estas comparaciones:

    1. Si el valor de la celda es la fecha de hoy Y esta celda es equivalente a _dateSelected, no proporcione un valor de relleno.

    2. Si el valor de la celda es la fecha de hoy pero no es equivalente a _dateSelected, proporcione un valor de relleno ColorFade.

    3. La última comparación no es tan clara. Es una comparación entre el valor de texto real en la celda y el valor del elemento de celda (el número en pantalla y el número de elemento).

      Para comprender mejor esto, tome septiembre de 2018, un mes que comienza un sábado y termina un domingo. En este caso, el calendario muestra del 26 al 31 de agosto y el 1 de septiembre en la primera fila, y Abs(Title.Text - ThisItem.Value) = 26 hasta el 1 de septiembre. Entonces Abs(Title.Text - ThisItem.Value) = 5. Permanecerá en 5 hasta la última fila del calendario, que muestra el 30 de septiembre y del 1 al 6 de octubre. En este Abs(Title.Text - ThisItem.Value) seguirá siendo 5 para el 30 de septiembre, pero será 35 para las fechas de octubre.

      Este es el patrón: para los días que se muestran del mes anterior, Abs(Title.Text - ThisItem.Value) siempre será igual al valor Title.Text del primer día mostrado. Para los días que se muestran en el mes siguiente, Abs(Title.Text - ThisItem.Value) siempre será igual al valor de elemento MonthDayGallery de la primera celda de dicho mes (en este caso, 1 de octubre) menos 1. Y, lo más importante, en los días que se muestran en el mes seleccionado actualmente, Abs(Title.Text - ThisItem.Value) siempre será igual al valor del primer elemento de ese mes menos 1 y nunca superará 5, como muestra el ejemplo anterior. Por lo tanto, es perfectamente válido escribir la fórmula como Abs(Title.Text - ThisItem.Value) > 5.

      Esta instrucción verifica si el valor de la fecha está fuera del mes seleccionado actualmente. De ser así, Relleno aparecerá parcialmente en un gris opaco.

    Nota

    Puede verificar la validez de esta última comparación por usted mismo insertando un control Etiqueta en la galería y estableciendo su propiedad Text en este valor:
    Abs(Title.Text - ThisItem.Value).

  • Propiedad: Visible
    Valor:

    !(
    DateAdd( _firstDayInView, ThisItem.Value, Days ) - 
        Weekday( DateAdd( _firstDayInView, ThisItem.Value,Days ) ) + 1 
    > _lastDayOfMonth
)

    La instrucción anterior verifica si la celda está en una fila en la que no hay días del mes seleccionado actualmente. Recuerde que restar el valor del día de la semana de cualquier día a su valor de fecha y sumar 1 siempre devuelve el primer elemento de la fila en la que reside ese día. Entonces, esta instrucción verifica si el primer día de la fila es posterior al último día del mes visible. Si es así, no aparecerá porque toda la fila contiene días del mes siguiente.

  • Propiedad: OnSelect
    Valor: Una función Set que establece la variable _dateSelected en la fecha de la celda seleccionada:

    Set( _dateSelected, DateAdd( _firstDayInView, ThisItem.Value, Days ) )

Control de círculo en la galería del calendario

Control de círculo MonthDayGallery.

  • Propiedad: Visible
    Valor: una fórmula que determina si hay eventos programados para la fecha seleccionada y si los controles Subcircle y Title están visibles:

    CountRows(
    Filter( MyCalendarEvents, 
        DateValue( Text( Start ) ) = DateAdd( _firstDayInView, ThisItem.Value, Days )
    )
) > 0 && !Subcircle.Visible && Title.Visible

    El control Circle está visible si el campo Iniciar para cualquier evento es equivalente a la fecha de esa celda, si el control Title está visible, y si el control Subcircle no está visible. En otras palabras, este control está visible cuando se produce al menos un evento en este día, y este día no está seleccionado. Si está seleccionado, los eventos para ese día se muestran en el control CalendarEventsGallery.

Control de subcírculo en la galería del calendario

Control de subcírculo MonthDayGallery.

  • Propiedad: Visible
    Valor:

    DateAdd( _firstDayInView, ThisItem.Value ) = _dateSelected && Title.Visible

    El control Subcírculo está visible cuando _dateSelected es equivalente a la fecha de la celda, y el control Title está visible. En otras palabras, este control aparece cuando la celda es la fecha seleccionada actualmente.

Galería de eventos

Control CalendarEventsGallery.

  • Propiedad: Items
    Valor: una fórmula que ordena y filtra la galería de eventos:

    SortByColumns(
    Filter( MyCalendarEvents,
        Text( Start, DateTimeFormat.ShortDate ) = Text( _dateSelected, DateTimeFormat.ShortDate )
    ),
    "Start"
)

    La colección MyCalendarEvents contiene todos los eventos entre _minDate y _maxDate. Para mostrar los eventos solo para la fecha seleccionada, se aplica un filtro en MyCalendarEvents para mostrar los eventos que tienen una fecha de inicio equivalente a \ _dateSelected. Los elementos se ordenan por sus fechas de inicio para ponerlos en orden secuencial.

Pasos siguientes

Nota

¿Puede indicarnos sus preferencias de idioma de documentación? Realice una breve encuesta. (tenga en cuenta que esta encuesta está en inglés)

La encuesta durará unos siete minutos. No se recopilan datos personales (declaración de privacidad).