'#e4e4e4',
'grid_background_color_choice' => 'transparent',
'grid_background_color' => '#FFFFFF',
'grid_hover_color' => '#141827',
'days_of_week_color' => '#5d5d5d',
'date_marker_color' => '#141827',
'multiday_event_bar_color_choice' => 'default',
'multiday_event_bar_color' => '#334aff',
'tooltip_background_color' => 'default',
];
}
/**
* {@inheritdoc}
*/
public function setup_arguments() {
return [
'priority' => 65,
'capability' => 'edit_theme_options',
'title' => esc_html__( 'Month View', 'the-events-calendar' ),
];
}
/**
* {@inheritdoc}
*/
public function setup_content_headings() {
return [
'month_view_font_colors' => [
'priority' => 0,
'type' => 'heading',
'label' => esc_html_x(
'Set Font Colors',
'The header for the font color control section.',
'the-events-calendar'
),
],
'month_view_separator-10' => [
'priority' => 10,
'type' => 'separator',
],
'month_view_appearance' => [
'priority' => 11,
'type' => 'heading',
'label' => esc_html_x(
'Adjust Grid Colors',
'The header for the calendar grid color control section.',
'the-events-calendar'
),
],
];
}
/**
* {@inheritdoc}
*/
public function setup_content_settings() {
return [
'grid_lines_color' => [
'sanitize_callback' => 'sanitize_hex_color',
'sanitize_js_callback' => 'maybe_hash_hex_color',
],
'grid_hover_color' => [
'sanitize_callback' => 'sanitize_hex_color',
'sanitize_js_callback' => 'maybe_hash_hex_color',
],
'grid_background_color_choice' => [
'sanitize_callback' => 'sanitize_key',
'sanitize_js_callback' => 'sanitize_key',
],
'grid_background_color' => [
'sanitize_callback' => 'sanitize_hex_color',
'sanitize_js_callback' => 'maybe_hash_hex_color',
],
'tooltip_background_color' => [
'sanitize_callback' => 'sanitize_key',
'sanitize_js_callback' => 'sanitize_key',
],
'days_of_week_color' => [
'sanitize_callback' => 'sanitize_hex_color',
'sanitize_js_callback' => 'maybe_hash_hex_color',
],
'date_marker_color' => [
'sanitize_callback' => 'sanitize_hex_color',
'sanitize_js_callback' => 'maybe_hash_hex_color',
],
'multiday_event_bar_color_choice' => [
'sanitize_callback' => 'sanitize_key',
'sanitize_js_callback' => 'sanitize_key',
],
'multiday_event_bar_color' => [
'sanitize_callback' => 'sanitize_hex_color',
'sanitize_js_callback' => 'maybe_hash_hex_color',
]
];
}
/**
* {@inheritdoc}
*/
public function setup_content_controls() {
$customizer = tribe( 'customizer' );
return [
'days_of_week_color' => [
'priority' => 3,
'type' => 'color',
'label' => esc_html_x(
'Days of the Week',
'The days of the week text color setting label.',
'the-events-calendar'
),
],
'date_marker_color' => [
'priority' => 5,
'type' => 'color',
'label' => esc_html_x(
'Date Marker',
'The date marker text color setting label.',
'the-events-calendar'
),
],
'grid_background_color_choice' => [
'priority' => 17,
'type' => 'radio',
'label' => esc_html_x(
'Grid Background',
'The grid background color setting label.',
'the-events-calendar'
),
'choices' => [
'transparent' => esc_html_x(
'Transparent',
'Label for option to leave transparent (default).',
'the-events-calendar'
),
'custom' => esc_html_x(
'Custom',
'Label for option to set a custom color.',
'the-events-calendar'
),
],
],
'grid_background_color' => [
'priority' => 18, // This should come immediately after 'grid_background_color_choice'.
'type' => 'color',
'active_callback' => function( $control ) use ( $customizer ) {
$setting_name = $customizer->get_setting_name( 'grid_background_color_choice', $control->section );
$value = $control->manager->get_setting( $setting_name )->value();
return $this->defaults['grid_background_color_choice'] !== $value;
},
],
'tooltip_background_color' => [
'priority' => 18, // This should come immediately after 'grid_background_color_choice'.
'type' => 'radio',
'label' => esc_html_x(
'Event Preview Background',
'Label for tooltip background color setting.',
'the-events-calendar'
),
'description' => esc_html_x(
'Preview display when hovering on an event title',
'The grid background color setting description.',
'the-events-calendar'
),
'choices' => [
'default' => _x(
'White',
'Label for option to leave white (default).',
'the-events-calendar'
),
'event' => sprintf(
/* translators: 1: Customizer url. */
_x(
'Use the General Background Color',
'Label for option to use the event background color. Links to the event background color setting.',
'the-events-calendar'
),
$customizer->get_setting_url(
'global_elements',
'background_color_choice'
)
)
],
'active_callback' => function( $control ) use ( $customizer ) {
$setting_name = $customizer->get_setting_name( 'grid_background_color_choice', $control->section );
$value = $control->manager->get_setting( $setting_name )->value();
// No point in giving them the option if the background color isn't set to use.
return $this->should_include_setting_css( 'background_color_choice', 'global_elements' ) && $this->defaults['grid_background_color_choice'] === $value;
},
],
'grid_lines_color' => [
'priority' => 13,
'type' => 'color',
'label' => esc_html_x(
'Grid Lines Color',
'The grid lines color setting label.',
'the-events-calendar'
),
],
'multiday_event_bar_color_choice' => [
'priority' => 7,
'type' => 'radio',
'label' => esc_html_x(
'Event Span',
'The multiday event bar color setting label.',
'the-events-calendar'
),
'description' => esc_html_x(
'For all-day and multi-day events',
'The multiday event bar color setting description.',
'the-events-calendar'
),
'choices' => [
'default' => sprintf(
/* translators: 1: Customizer url. */
_x(
'Use the Accent Color',
'Label for option to use the accent color. Links to the accent color setting.',
'the-events-calendar'
),
$customizer->get_setting_url(
'global_elements',
'accent_color'
)
),
'custom' => _x(
'Custom',
'Label for option to set a custom color.',
'the-events-calendar'
),
],
],
'multiday_event_bar_color' => [
'priority' => 9,
'type' => 'color',
'active_callback' => function( $control ) use ( $customizer ) {
$setting_name = $customizer->get_setting_name( 'multiday_event_bar_color_choice', $control->section );
$value = $control->manager->get_setting( $setting_name )->value();
return $this->defaults['multiday_event_bar_color_choice'] !== $value;
},
],
'grid_hover_color' => [
'priority' => 15,
'type' => 'color',
'label' => esc_html_x(
'Day Hover',
'Day hover color setting label.',
'the-events-calendar'
),
'description' => esc_html_x(
'Bottom border highlight when hovering on a day',
'The grid hover color setting description.',
'the-events-calendar'
),
],
];
}
/**
* Grab the CSS rules template
*
* @param string $template The Customizer CSS string/template.
*
* @return string The Customizer CSS string/template, with v2 Month View styles added.
*/
public function get_css_template( $template ) {
if ( ! tribe_events_views_v2_is_enabled() ) {
return $template;
}
// These allow us to continue to _not_ target the shortcode.
$apply_to_shortcode = apply_filters( 'tribe_customizer_should_print_shortcode_customizer_styles', false );
$tribe_events = $apply_to_shortcode ? '.tribe-events' : '.tribe-events:not( .tribe-events-view--shortcode )';
if ( $this->should_include_setting_css( 'grid_lines_color' ) ) {
$template .= "
$tribe_events.tribe-common--breakpoint-medium .tribe-events-calendar-month__body,
$tribe_events.tribe-common--breakpoint-medium .tribe-events-calendar-month__day,
$tribe_events.tribe-common--breakpoint-medium .tribe-events-calendar-month__week {
border-color: <%= month_view.grid_lines_color %>;
}
";
}
if ( $this->should_include_setting_css( 'grid_hover_color' ) ) {
$template .= "
$tribe_events.tribe-common--breakpoint-medium .tribe-events-calendar-month__day:hover::after {
background-color: <%= month_view.grid_hover_color %>;
}
";
}
if ( $this->should_include_setting_css( 'grid_background_color_choice' ) ) {
if ( $this->should_include_setting_css( 'grid_background_color' ) ) {
$template .="
$tribe_events .tribe-events-calendar-month__body {
background-color: <%= month_view.grid_background_color %>;
}
";
}
} else {
if (
$this->should_include_setting_css( 'tooltip_background_color' )
&& $this->should_include_setting_css( 'background_color_choice', 'global_elements' )
) {
$template .="
.tooltipster-base.tribe-events-tooltip-theme,
.tooltipster-base.tribe-events-tooltip-theme--hover {
background-color: <%= global_elements.background_color %>;
}
";
}
}
if ( $this->should_include_setting_css( 'days_of_week_color' ) ) {
$template .="
$tribe_events .tribe-events-calendar-month__header-column-title {
color: <%= month_view.days_of_week_color %>;
}
";
}
if ( $this->should_include_setting_css( 'date_marker_color' ) ) {
$template .="
.tribe-events-calendar-month__day-date.tribe-common-h4,
$tribe_events .tribe-events-calendar-month__day-date-link,
$tribe_events .tribe-events-calendar-month__day:not(.tribe-events-calendar-month__day--current) .tribe-events-calendar-month__day-date-daynum {
color: <%= month_view.date_marker_color %>;
}
";
}
if ( $this->should_include_setting_css( 'multiday_event_bar_color_choice' ) ) {
if ( $this->should_include_setting_css( 'multiday_event_bar_color' ) ) {
$bar_color_obj = new Tribe__Utils__Color( $this->get_option( 'multiday_event_bar_color' ) );
$bar_color_arr = $bar_color_obj->getRgb();
$bar_color_rgb = $bar_color_arr['R'] . ',' . $bar_color_arr['G'] . ',' . $bar_color_arr['B'];
$bar_color = 'rgba(' . $bar_color_rgb . ',0.24)';
$bar_color_hover = 'rgba(' . $bar_color_rgb . ',0.34)';
$template .="
$tribe_events .tribe-events-calendar-month__multiday-event:not(.tribe-events-calendar-month__multiday-event--past) .tribe-events-calendar-month__multiday-event-bar-inner {
background-color: $bar_color;
}
$tribe_events tribe-events-calendar-month__multiday-event:not(.tribe-events-calendar-month__multiday-event--past) .tribe-events-calendar-month__multiday-event-bar-inner--hover,
$tribe_events tribe-events-calendar-month__multiday-event:not(.tribe-events-calendar-month__multiday-event--past) .tribe-events-calendar-month__multiday-event-bar-inner--focus {
background-color: $bar_color_hover;
}
";
}
}
return $template;
}
/* Deprecated */
/**
* Gets the link to the a setting in the TEC Customizer Global Elements.
*
* @since 5.7.0
* @deprecated 5.8.0
*
* @param string $setting The sting setting "slug" to link to.
* @param string $label_text The translated label text for the link.
*
* @return string The HTML link element.
*/
public function get_global_element_link( $setting, $label_text ) {
_deprecated_function( __METHOD__, '5.8.0', "tribe( 'customizer' )->get_setting_link" );
if ( empty( $setting ) ) {
// Default to first item if not set.
$setting = 'event_title_color';
}
return tribe( 'customizer' )->get_setting_link( 'global_elements', $setting, $label_text );
}
/**
* Gets the link to the event background color setting in Customizer.
*
* @since 5.8.0
* @deprecated 5.8.0
*
* @return string The HTML link element.
*/
public function get_general_settings_link() {
_deprecated_function( __METHOD__, '5.8.0', "tribe( 'customizer' )->get_section_link" );
$label_text = _x(
'General',
'Text used for links to the General settings section.',
'the-events-calendar'
);
return tribe( 'customizer' )->get_section_link( 'global_elements', $label_text );
}
/**
* Gets the link to the event background color setting in Customizer.
*
* @since 5.8.0
* @deprecated 5.8.0
*
* @return string The HTML link element.
*/
public function get_events_background_link() {
_deprecated_function( __METHOD__, '5.8.0', "tribe( 'customizer' )->get_setting_link" );
$label_text = _x(
'General Background Color',
'Text used for links to the Event Background Color setting.',
'the-events-calendar'
);
return tribe( 'customizer' )->get_setting_link( 'global_elements', 'background_color_choice', $label_text );
}
/**
* Gets the link to the accent color setting in Customizer.
*
* @since 5.8.0
* @deprecated 5.8.0
*
* @return string The HTML link element.
*/
public function get_accent_color_link() {
_deprecated_function( __METHOD__, '5.8.0', "tribe( 'customizer' )->get_setting_link" );
$label_text = _x(
'Accent Color',
'Text used for links to the Accent Color setting.',
'the-events-calendar'
);
return tribe( 'customizer' )->get_setting_link( 'global_elements', 'accent_color', $label_text );
}
}