monthly by day of the week, no last week

[salex]

I was experimenting with a rails 4 app where I needed an Events model with a few simple recurring events. Found ice_cube and recurring_select. Unfortunately one of the events is the last Tuesday of the month. You only have weeks 1 through 4.

I was also trying to use zurb foundation and the dialog was appended to the end of the body with no styling. I copied the css to my application assets and the dialog appeared in fixed position, but think there is still some foundation stuff messing it up. The same days of the week dialog wraps. Think because of padding on the cells. This is my and foundations problem, just thought I'd let you know. I'll attach a screen shot.

[forrest]

Hey @salex, thanks for the heads up. If you track down which styles are being overwritten, we can try making our css a little stricter.

[salex]

I changed the width of the anchor to 20px and everything straightened out. There browser inspector (safari and chrome was reporting everything correctly (12px, 15 width, 5x3 padding). I put an important on the padding, and then checked it off and things moved. I then did the width 20px and it fixed it.

Maybe 6px of padding, 2px of border and 2 12px character width is more than 15 px?

        .rs_calendar_day, .rs_calendar_week {
          width:155px;
          a {display:inline-block; text-align:center; width:20px;...

[salex]

Your readme markdown is a little confusing on what you have to configure. You have add //= require recurring_select or both application.css and application.js. I saw the //= instead of *= for css and thought it was a mistake.

I added the *= require recurring_select to application.css and it worked without copying it over. Still had the 20px width issue. Maybe I can just overwrite that css rule.

[edit]

That worked (just overwriting the a rules). I did have to add !important to it and the end-of-month rule.

[salex]

I've found the css problem, but can't find a solution. Zurb-Foundation use box-sizing: border-box; and it is applied at the root.

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

I can't over-ride it at a div level. I can turn it off in the web inspector and everything works, but is of no use - other than pointing out where the problem was.

My only solution is to ove-ride the widths, adding 6px for the padding to the width to be equivalent to content-box.

.rs_calendar_day, .rs_calendar_week {
  a {width:21px !important}
  a.end_of_month { width: 81px !important }
}

Don't know why end_of_month didn't got to 87px?

I think I found a suspect in your Rails 4 problem of not having the select tag show up in development mode. Think it is TurboLink. Had numerous problems in Safari, then used Chrome and I would get a js error breakpoint if I closed the dialog:

noTurbolink = function(link) {
  var ignore;
  while (!(ignore || link === document)) {
    ignore = link.getAttribute('data-no-turbolink') != null;
    link = link.parentNode;
  }
  return ignore;
};

ERROR => cannot call getAttribute on null

I've had problems with Turbolink on another app where I had to turn it off because it mucked with what little JS I had. Not sure it is ready for primetime.

Turbolink is not the problem. I posted something on issue #22

[salex]

my js.coffee hack

init_calendar_weeks: (section) =>
  monthly_calendar = section.find(".rs_calendar_week")
  monthly_calendar.html ""
  row_labels = $.fn.recurring_select.texts["order"]
  cell_str = $.fn.recurring_select.texts["days_first_letter"]

  for num in [1..5]
    if num == 5
      week = -1
      monthly_calendar.append "<span>Last</span>"
    else
      week = num
      monthly_calendar.append "<span>#{row_labels[num - 1]}</span>"
    for day_of_week in [0..6]
      day_link = $("<a>", {text: cell_str[day_of_week]})
      day_link.attr("day", day_of_week)
      day_link.attr("instance", week)
      monthly_calendar.append day_link
  $.each @current_rule.hash.validations.day_of_week, (key, value) ->
    $.each value, (index, instance) ->
      section.find("a[day='#{key}'][instance='#{instance}']").addClass("selected")
  monthly_calendar.find("a").on "click tap", @weekOfMonthChanged

[AStew8]

Is this only solution to see the Last(5th) Week of the Monthly by Day of the Week to use this js.coffee hack?