Ref. http://drupal.org/node/721762#comment-3881694 Partially booked day

Add selections and css. Needs review.

availability_calendar.module

    array(array('data' => ' ', 'class' => 'calavailable'),
             array('data' => t('Available'), 'class' => 'keystatus')),
    array(array('data' => ' ', 'class' => 'calnotavailable'),
-             array('data' => t('Fully booked'), 'class' => 'keystatus'))             
+             array('data' => t('Fully booked'), 'class' => 'keystatus')),
+    array(array('data' => ' ', 'class' => 'calavailfullbook'),
+             array('data' => t('Available / Fully booked'), 'class' => 'keystatus')),  
+    array(array('data' => ' ', 'class' => 'calfullbookavail'),
+             array('data' => t('Fully booked / Available'), 'class' => 'keystatus')),           
+    array(array('data' => ' ', 'class' => 'calprobookfullbook'),
+             array('data' => t('Provisionally booked/Fully booked'), 'class' => 'keystatus')), 
+    array(array('data' => ' ', 'class' => 'calfullbookprobook'),
+             array('data' => t('Fully booked / Provisionally booked'), 'class' => 'keystatus')),             
+    array(array('data' => ' ', 'class' => 'calavailprobook'),
+             array('data' => t('Available / Provisionally booked'), 'class' => 'keystatus')),
+    array(array('data' => ' ', 'class' => 'calprobookavail'),
+             array('data' => t('Provisionally booked / Available'), 'class' => 'keystatus'))





availability_calendar.module  
     
  $cells = array(); // our container for cells
  foreach ($week as $key => $val) {
    $weeknumber = $key + 1;
   array_push($cells, array('data' => $notes[$weeknumber], 'class' => 'calnote')); // add the note cell to the cells array
    for ($i=0; $i<7; $i++) {
      // if there's a date, it's part of this month
      if ($week[$key][$i]) {
        $todayclass = '';
        if ( $today == $week[$key][$i] . ',' . $month . ',' . $year) {
          $todayclass = 'caltoday';
        }
        if ($day_status[$week[$key][$i]] == 1) { // booked
          array_push($cells, array('data' => $week[$key][$i], 'class' => "calnotavailable $todayclass"));
        }
        elseif ($day_status[$week[$key][$i]] == 2) { // provisionally booked
          array_push($cells, array('data' => $week[$key][$i], 'class' => "calnotavailableprov $todayclass"));
        }            
+        /* Day Multi-Status (A) */
+        elseif ($day_status[$week[$key][$i]] == 3) { // available-fully booked
+          array_push($cells, array('data' => $week[$key][$i], 'class' => "calavailfullbook $todayclass"));
+        }        
+        elseif ($day_status[$week[$key][$i]] == 4) { // fully booked-available
+          array_push($cells, array('data' => $week[$key][$i], 'class' => "calfullbookavail $todayclass"));
+        }
+        /* Day Multi-Status (B) */
+        elseif ($day_status[$week[$key][$i]] == 5) { // provisionally booked-fully booked
+          array_push($cells, array('data' => $week[$key][$i], 'class' => "calprobookfullbook $todayclass"));
+        }
+        elseif ($day_status[$week[$key][$i]] == 6) { // fully booked-provisionally booked
+          array_push($cells, array('data' => $week[$key][$i], 'class' => "calfullbookprobook $todayclass"));
+        }
+        /* Day Multi-Status (C) */
+        elseif ($day_status[$week[$key][$i]] == 7) { // available-provisionally booked
+          array_push($cells, array('data' => $week[$key][$i], 'class' => "calavailprobook $todayclass"));
+        }
+        elseif ($day_status[$week[$key][$i]] == 8) { // provisionally booked-available
+          array_push($cells, array('data' => $week[$key][$i], 'class' => "calprobookavail $todayclass"));
+        }
        else { // available
          array_push($cells, array('data' => $week[$key][$i], 'class' => "calavailable $todayclass"));
        }


 
 
        
availability_calendar.module
               
/**
 * availability_calendars status options.
 */
function availability_calendars_options() {
  // TODO: make these configurable
  return array(
    0 => t('Available'),
    1 => t('Fully booked'),
-    2 => t('Provisionally booked')
+    2 => t('Provisionally booked'),
+    3 => t('Available/Fully booked'),
+    4 => t('Fully booked/Available'),
+    5 => t('Provisionally booked/Fully booked'),
+    6 => t('Fully booked/Provisionally booked'),
+    7 => t('Available/Provisionally booked'),
+    8 => t('Provisionally booked/Available')
  );
}





availability_calendars.css


table.cal tr td.calnotavailable {
  color: #fff;
  text-align: center;
  background: lightpink;
}
+
+ /* Day Multi-Status (A) */
+ table.cal tr td.calavailfullbook {
+   color: #ccc;
+   text-align: center;
+   background: gray;
+ }
+ 
+ table.cal tr td.calfullbookavail {
+   color: #ccc;
+   text-align: center;
+   background: silver;
+ }
+ 
+ /* Day Multi-Status (B) */
+ table.cal tr td.calprobookfullbook {
+   color: #ccc;
+   text-align: center;
+   background: lime;
+ }
+ 
+ table.cal tr td.calfullbookprobook {
+   color: #ccc;
+   text-align: center;
+   background: olive;
+ }
+ 
+ /* Day Multi-Status (C) */
+ table.cal tr td.calavailprobook {
+   color: #ccc;
+   text-align: center;
+   background: teal;
+ }
+ 
+ table.cal tr td.calprobookavail {
+   color: #ccc;
+   text-align: center;
+   background: aqua;
+ }

td.keystatus {
  padding-left: 2px;
}

Comments

crutch’s picture

StatusFileSize
new5.5 KB

updated

crutch’s picture

StatusFileSize
new49.79 KB

capture of test case (ref capture: http://drupal.org/node/875546#comment-3882602)

crutch’s picture

StatusFileSize
new33.49 KB
new4.11 KB

update - if using css background images - remove key status from previous. Key status is defined by the original 3 keys and the extras are not needed.

crutch’s picture

StatusFileSize
new3.97 KB

again, I made another error. Need to remove extra 'else' statement from dev_2.txt

nicholas.alipaz’s picture

crutch you should definitely look at the way things are done in the latest release, a lot of changes were made that this code would not necessarily work with.

This could conflict with the work aacraig is doing on configurable status'. We may need to do one or the other first.

I think we should think of a way to do the diagonal box with either css or jQuery rather than images. Reason being that images are more difficult for people to customize and if we ever move configuration of colors into the administration area they wouldn't work.

Let me know if you have questions about how things are changed in latest dev.

crutch’s picture

Thanks nicholas, I'll take a look! I had a little time this week to dabble with it. I'll review latest dev.

...maybe split day in half vertically would be better for css without image.

---

...checked it out. okay yea, probably need to wait for split days until finished with latest development. My edits only work on previous development and I see things are much improved in latest. I think it would be fairly simple to add afterward with same concept.

---

...tested vertical line and just doesn't look right. I'll try to test some day display options while module work is begin done.

nicholas.alipaz’s picture

I invested a little time into searching for css solutions to diagonally sliced colors and found this:
http://www.infimum.dk/HTML/slantinfo.html
which is ultimately from Eric Meyers (the css god):
http://meyerweb.com/eric/css/edge/slantastic/demo.html

It seems like a solution to a diagonally colored box, but I am not completely sure about positioning text within it. The colored div would likely have to be positioned via relative positioning and a z-index to place it behind the text. I will see if I can get a working example.

Other ideas are welcome.

nicholas.alipaz’s picture

I was able to accomplish what we need, in testing, with the following:

Example HTML:

<table>
  <tbody>
    <tr>
      <td><div class="cal-slanted-day">31</div><div class="cal-slanted-bg calavail_calnot"></div></td>
    </tr>
  </tbody>
</table>

Example CSS:

.cal-slanted-day, .cal-slanted-bg{position:absolute;}
.cal-slanted-day{font-size:12px;height:15px;padding:2px 0 1px;text-align:center;width:20px;z-index:0;}
.cal-slanted-bg{z-index:-1;float:left;border-width:10px;border-style:solid;width:0px;height:0px;line-height:0px;}
.cal-slanted-bg.calavail_calnot{border-color:#90EE90 #FFB6C1 #FFB6C1 #90EE90;}

Works for me and should be cross-browser compliant as well as easily added to the module.

crutch’s picture

Great, thanks! I had started with looking at how borders were displayed around the test calendar above because it showed an angle that we needed. I set it down and just now returned to find solution posted :) I think I can do the multi-status/split day effort based on latest dev but let me know if you want to do it, either way is good.

nicholas.alipaz’s picture

I have added an initial commit of this feature: http://drupal.org/cvs?commit=473522

It needs to be reviewed and css tested across browsers. The latest dev is stable but definitely requires a run of update.php when upgrading. I do not suggest running the update on a live site since I am the only one who has tested the upgrade path. Please let me know your findings.

crutch’s picture

StatusFileSize
new35.77 KB

Using Dev version from December 31, I tried patching for a few hours with no luck. Kept getting error see attached. I couldn't rule out user error though.

Attempted manual patches with no luck, no split day options available in dropdowns. Got error after update.php

* user warning: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ')' at line 1 query: SELECT COUNT(DISTINCT nid) FROM node WHERE type IN () in C:\TWAMPd\htdocs\sites\all\modules\availability_calendars\availability_calendars.install on line 225.
* user warning: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ') ORDER BY nid ASC LIMIT 0, 1' at line 1 query: SELECT nid FROM node WHERE nid > 0 AND type IN () ORDER BY nid ASC LIMIT 0, 1 in C:\TWAMPd\htdocs\sites\all\modules\availability_calendars\availability_calendars.install on line 229.

nicholas.alipaz’s picture

StatusFileSize
new159.49 KB
new127.92 KB

Just use dev from Jan 03. That has all my changes. If you are using this on a fresh installation, no availability calendar data has been saved yet you will not need to run update.php.

You will also need to enable the checkbox under admin/settings/availability_calendars to get the extra options.

crutch’s picture

StatusFileSize
new62.22 KB
new34.33 KB
new61.84 KB
new35.68 KB
new20.41 KB

ah yes thanks. Tested on various browsers but I don't have IE8 on dev machine. Everything looks good to me. Maybe a minor css tweak below. IE7 may need a little work. Operation is great!

From what I can see if I change css to this, it fixes an issue I have with split days being 2px moved up compared to normal days. The difference may because I am using Fusion base theme. When I switch to garland it is correct in FF. Google and Safari moves down 1px at top and moves down 1px at bottom in Garland. Basically, 2px too tall for those two browsers.

.cal-split-bg {
    border-style: solid;
    border-width: 12px;
    float: left;
    <del>height: 2px;</del>
    line-height: 0;
    margin-top: -21px; /* margin-top: -23px; */
    width: 0;
    z-index: 0;
}

.cal-split-date {
    height: 15px;
    margin-top: -21px;  /* margin-top: -22px; */
    padding: 3px 0 1px; /* padding: 2px 0 1px; */
    text-align: center;
    width: 25px;
    z-index: 1;
}
nicholas.alipaz’s picture

I fixed the error in the sql statement.http://drupal.org/cvs?commit=474124

For the CSS, I want to attempt to stay only using CSS but this may call for some jQuery to determine the width/height of the surrounding cell. Either that or possibly just doing some aggressive resets on our table's elements. I will have to think about it and look into some possible fixes for the css.

nicholas.alipaz’s picture

Found a few more things that I didn't consider in the upgrade path, those are fixed now too.
http://drupal.org/cvs?commit=474144

crutch’s picture

The css adjustments in #13 for Fusion based theme made it correct across every browser except IE7 which is a different bird anyway.

I think if we make correct across most browsers, for Garland base theme, then it should be fine. If we build for the default Garland then folks can make needed adjustments for different themes. IE7 may need a separate style sheet.

Maybe start with that idea and table it knowing that we may have to come back and do more css/jquery work for subsequent release(s) if there is a large outcry that it is an issue?

nicholas.alipaz’s picture

crutch, I think what I would like to do is to do some general theming for some popular base themes and core themes. I am thinking of doing the following since these css changes really are very dependent on the different themes' loaded stylesheets.

Load different css dependent on the theme:

function availability_calendars_init() {
  // base css
  drupal_add_css(drupal_get_path('module', 'availability_calendars') . '/availability_calendars.css');
  // current theme info
  $theme_data = _system_theme_data();
  $theme_key = array_pop(explode('/', path_to_theme()));

  // themes we will perform specific theming on
  $core_themes = array('garland', 'bluemarine', 'chameleon', 'marvin', 'minnelli', 'pushbutton');
  $base_themes = array('fusion', 'tao', 'zen', 'ninesixty');

  // check to see if we are using a core theme
  if (in_array($theme_key, array_merge($core_themes, $base_themes))) $add_css = TRUE;
  // check whether the theme being used is a subtheme of one of our themed base themes
  foreach ($base_themes as $key) {
    if (array_key_exists($key, $theme->base_themes)) {
      $theme_key = $key;
      $add_css = TRUE;
      break;
  }
  if ($add_css) drupal_add_css(drupal_get_path('module', 'availability_calendars') . '/css/' . $theme_key . '.css');
}

Then we can just load up different css dependent on the theme.

nicholas.alipaz’s picture

Hadn't actually tested the above code before posting, just worked it out in my head. Here is some more definite working code.

function availability_calendars_init() {
  // base css
  drupal_add_css(drupal_get_path('module', 'availability_calendars') . '/availability_calendars.css');
  // current theme info
  $theme_data = _system_theme_data(); // array containing info about all themes
  $theme_key = array_pop(explode('/', path_to_theme())); // get the currently enabled theme's namespace, can't find a better way to do this
  $theme = $theme_data[$theme_key]; // object containing all info about current theme
  $theme_bases = $theme->base_themes; // array of current theme's base themes

  // themes we will perform specific theming on
  $core_themes = array('garland', 'bluemarine', 'chameleon', 'marvin', 'minnelli', 'pushbutton');
  $base_themes = array('fusion_core', 'tao', 'zen', 'ninesixty');

  // check to see if we are using a core theme
  if (in_array($theme_key, array_merge($core_themes, $base_themes))) $add_css = TRUE;
  // check whether the theme being used is a subtheme of one of our themed base themes
  foreach ($base_themes as $key) {
    if (is_array($theme_bases)) {
      if (array_key_exists($key, $theme_bases)) {
        $theme_key = $key; // if the current theme is a subtheme of one of our base themes then use the base theme's namespace instead of our enabled theme's
        $add_css = TRUE;
        break;
      }
    }
  }
  if ($add_css) drupal_add_css(drupal_get_path('module', 'availability_calendars') . '/css/' . $theme_key . '.css');
}
nicholas.alipaz’s picture

Ok, I have done some testing in multiple themes. I have made a series of commits that should get this styling looking pretty decent in a majority of core and popular base themes.
http://drupal.org/cvs?commit=478886
http://drupal.org/cvs?commit=478888
http://drupal.org/cvs?commit=478890
http://drupal.org/cvs?commit=478892

Please give the changes a try through a cvs checkout of the dev or using latest dev (Jan 10 or later) once it is generated.

crutch’s picture

StatusFileSize
new284.44 KB
new263.16 KB
new227.39 KB
new200.79 KB
new199.24 KB
new229.11 KB

Thanks nicholas. Code functions well.

I'm seeing some 1px movement. I'll try to look further into it today to see what may be moving things around. Only tested FF so far and stopped when seeing movement in pushbutton.

--

In some days there is some extra right-margin like on this image at March 20. This may because of the width of the theme so it's spreading 100%, but day cells aren't, or something similar?

http://drupal.org/files/issues/ff-pushbutton-node2.jpg

nicholas.alipaz’s picture

Give the latest dev as of today (or cvs checkout) a try.
http://drupal.org/cvs?commit=484022

I think I pinpointed the issues.

nicholas.alipaz’s picture

Status: Needs review » Fixed

marking as fixed and moving my changes into 6.x-1.5

nicholas.alipaz’s picture

This is going into 6.x-1.5. There will still be some css tweaks in the future, but not enough issues to keep it from releasing.

crutch’s picture

It functions well from previous tests. Thanks for taking time to work on this. Hopefully I can take a peak at it this week.

Status: Fixed » Closed (fixed)

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

feldmarv’s picture

Day Multi-Status in 7.x version possible? Is there an ability to use this css and configuration in 7.x version of the module?

fietserwin’s picture

No, this module is whole day or whole night booking only.