Hi,
I'm working on a calendar which shows availability of travel promotions. I would like to mark certain dates as holidays (it's a good time for travel). E.g. I would like to put Christmas tree icon on December 24, 25 and 26th. I would like it to show on all calendars I have on my web page, so I guess it should be set either in CSS file or in module code. Concerning CSS I guess there is no class for particular date, only for set status (available, booked etc.).

Any ideas how to approach this?

migajos

Comments

migajos created an issue. See original summary.

fietserwin’s picture

fietserwin
Location Le Mont-Dore
CreditAttribution: fietserwin commented

For now it is indeed hard/impossible to select specific dates yourself using CSS only. However with a bit of jQuery you can do the following (untested, but it should work):
$(".cal-month[data-cal-month=12] tbody > tr > td > span").contains("25").addClass("christmas")

In PHP you could generate such a string for any given date (again untested, not even syntax checked):

$myYear = 2017;
$myMonth = 7;
$myDay = 14;
$myClass = 'quatorze-juillet';
$js = "$(\".cal-month[data-cal-year=$myYear][data-cal-month=$myMonth] tbody > tr > td > span\").contains(\"$myDay\").addClass(\"$myClass\")";
drupal_add_js($js);

HTH, please close this issue if this solves the problem for you.

migajos’s picture

migajos CreditAttribution: migajos commented

Looks like a solution :). Thank You very much. I will test and work on those options.

migajos’s picture

migajos CreditAttribution: migajos commented
Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

migajos’s picture

migajos CreditAttribution: migajos commented

Fietserwin, sorry for asking probably a stupid question, but I would like to try to implement this without a developers help.

Where do I put this code?

$myYear = 2017;
$myMonth = 7;
$myDay = 14;
$myClass = 'quatorze-juillet';
$js = "$(\".cal-month[data-cal-year=$myYear][data-cal-month=$myMonth] tbody > tr > td > span\").contains(\"$myDay\").addClass(\"$myClass\")";
drupal_add_js($js);

Should I create a new php file? Or should I place it in some existing file of a module?
thx
migajos

fietserwin’s picture

fietserwin
Location Le Mont-Dore
CreditAttribution: fietserwin commented

Never place it in an existing module file. Create a custom module or theme. In both cases you can create a hook_preprocess_HOOK function that contains this code, the HOOK being availability_calendar, hook being your custom module or theme name.

migajos’s picture

migajos CreditAttribution: migajos commented

So if I name my custom module "availability_calendar_special_dates", would the PHP file inside look like this?

function availability_calendar_special_dates_preprocess_availability_calendar(&$variables) {
$myYear = 2017;
$myMonth = 7;
$myDay = 14;
$myClass = 'quatorze-juillet';
$js = "$(\".cal-month[data-cal-year=$myYear][data-cal-month=$myMonth] tbody > tr > td > span\").contains(\"$myDay\").addClass(\"$myClass\")";
drupal_add_js($js);
  }
}
fietserwin’s picture

fietserwin
Location Le Mont-Dore
CreditAttribution: fietserwin commented

Yes, correct.

migajos’s picture

migajos CreditAttribution: migajos commented

Thank You.

Great module btw. Really well maintained.

migajos’s picture

migajos CreditAttribution: migajos commented

Unfortunately I can not make it work.

The module seems to be installed properly. I've activated it on admin/modules page. The module consists two files:

availability_calendars_special_dates.info

name = Availability Calendars Special Dates
description = Provides special theming for holidays and other special dates
core = 7.x

and

availability_calendars_special_dates.module


/**
 * @file
 * A module that allows theming of special dates in Availability Calendars
 */

function availability_calendars_special_dates_preprocess_availability_calendar(&$variables) {
$myYear = 2017;
$myMonth = 12;
$myDay = 24;
$myClass = 'christmas';
$js = "$(\".cal-month[data-cal-year=$myYear][data-cal-month=$myMonth] tbody > tr > td > span\").contains(\"$myDay\").addClass(\"$myClass\")";
drupal_add_js($js);
}
}

I've added to my CSS file:

.christmas { 
    background: #000000;
}

The December 24th 2017 doesn't get black background. Am I missing something?