Support for Fullcalendar #37

jensenkd · 2012-01-17T20:23:41Z

You have done a wonderful job on this project. I think a great component to support would be Fullcalendar: http://arshaw.com/fullcalendar/

panosru · 2012-01-20T15:36:03Z

+1 for this! I'm a bit busy currently with a project I need to finish really quick (thus I paused the development of plupload for a while) if no one will get a hand on this request I will once I'll have some more time!

juarezpaf · 2012-01-20T16:15:17Z

+1

svnlto · 2012-01-20T21:09:01Z

+1

evoskuil · 2012-01-22T23:48:04Z

+1

addyosmani · 2012-01-23T00:01:09Z

Soo..this calendar component looks interesting. In terms of being able to support theming it up, I can't imagine it taking an hour or two, but I'll be in honest in saying this is the first time I've seen this.

For the people +1'ing - have you used Fullcalendar before in production or just want it covered? :)

panosru · 2012-01-23T00:02:50Z

@addyosmani I used it in production it comes very handy but it is ugly :P so indeed it needs styling, if you check all the latest admin templates in themeforest they all have support for fullcalendar

evoskuil · 2012-01-23T00:05:05Z

I am planning on using it, but theming is an issue. Thanks for this project!

panosru · 2012-01-23T00:17:07Z

@addyosmani @evoskuil it is really simple to style this thing and turn it into a really hot baby

addyosmani · 2012-01-23T00:21:49Z

Okay. Let's go for it. There's a lot of work to still be done cleaning up the main theme that I'm focusing on, but if anyone wants to take a first stab at styling Fullcalendar please feel free to :)

The default styling at http://arshaw.com/fullcalendar/ isn't hugely different to what we're doing. I imagine what would probably need to be changed are the button styles (those will probably need to come under the same gradients as ui-state-default/our buttons) with a possibly new darker gradient state for the selected month. Again, feel free to use whatever you feel is best and we'll review once something is ready :)

jensenkd · 2012-01-25T02:23:05Z

@addyosmani it's the most popular calendar plugin for JQuery available. It has a huge user-base. I've used it in production on multiple, large sites with much success. I echo what the above posters say though...it aint purdy :)

PhilAndrew · 2012-02-01T08:15:51Z

Please let me know when this happen +1

mericano1 · 2012-04-28T15:07:32Z

+1

brennovich · 2012-05-03T01:46:26Z

I'm using Fullcalendar and Bootstrap in a Rails project, so i needed to integrate both.

https://gist.github.com/2582439

Example.

panosru · 2012-05-05T10:16:35Z

@brennovich good job dude! :)

cheenu · 2012-05-31T05:51:57Z

I think support for FullCalendar will be fantastic. +1

brennovich · 2012-06-03T22:40:27Z

I made a pull request.

panosru · 2012-06-03T23:23:19Z

@brennovich really nice work on that one :)

tkrotoff · 2012-06-11T16:09:24Z

For those interested, I've integrated FullCalendar with Twitter Bootstrap without using jquery-ui-bootstrap.
The integration is only done for the buttons (fc-button inside FullCalendar), the rest already looks good. In the end FullCalendar buttons behave exactly the way Bootstrap does it.

Since there is no need for jQuery UI (beside draggable and resizable), your web site will be quite lighter.

No need for jquery-ui-bootstrap
No need for jquery-ui CSS file (jquery-ui-*.custom.css)
Set FullCalendar theme property to false
Use FullCalendar js and css files as usual

Here the code, taken from my Rails 3.2 application. It use SASS and the SASS version of Bootstrap, still the code can be adapted to LESS or regular CSS:

/*
 * File is named bootstrap_and_overrides.css.scss
 *
 *= require fullcalendar/fullcalendar.css
*/

@import "bootstrap";
@import "bootstrap-responsive";


/* FullCalendar fc-button themed using Twitter Bootstrap. */

.fc-button.fc-state-default {
  @extend .btn;

  /* .btn-group > .btn */
  position: relative;
  /*float: left;*/
  /*margin-left: -1px;*/
  @include border-radius(0);
}

.fc-button.fc-state-active {
  @extend .btn.active;
}

.fc-button.fc-state-disabled {
  @extend .btn.disabled;
}

.fc-button.fc-state-disabled:active {
  @include box-shadow(none);
}

.fc-button.fc-corner-left {
  /* .btn-group > .btn:first-child */
  margin-left: 0;
     -webkit-border-top-left-radius: 4px;
         -moz-border-radius-topleft: 4px;
             border-top-left-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
      -moz-border-radius-bottomleft: 4px;
          border-bottom-left-radius: 4px;
}

.fc-button.fc-corner-right {
  /* .btn-group > .btn:last-child, .btn-group > .dropdown-toggle */
     -webkit-border-top-right-radius: 4px;
         -moz-border-radius-topright: 4px;
             border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
      -moz-border-radius-bottomright: 4px;
          border-bottom-right-radius: 4px;
}


/* Override some FullCalendar CSS properties that conflict with Twitter Bootstrap btn. */

.fc-state-default .fc-button-inner {
  background: transparent;
  border-width: 0 0;
}

.fc-button-content {
  line-height: $baseLineHeight;
  height: $baseLineHeight;
  padding: 0 0;
}

.fc-state-default .fc-button-effect span {
  @include buttonBackground($btnBackground, $btnBackgroundHighlight);
}

.fc-state-active .fc-button-inner {
  color: $grayDark;
}

Bonus point:
Set FullCalendar buttonText property to:

buttonText: {
  prev: '<i class="icon-arrow-left"></i>',
  next: '<i class="icon-arrow-right"></i>',
}

2012/09/02 edit:

To make it even cleaner:

  $('#calendar').fullCalendar({
    // ,,,
  });

  // HACK Remove the overflow of unnecessary span inside FullCalendar buttons.
  // This fix some problems under Internet Explorer < 9
  //
  // Original structure:
  // <span class="fc-button">
  //   <span class="fc-button-inner">
  //     <span class="fc-button-content">[...]</span>
  //     <span class="fc-button-effect">
  //       <span></span>
  //     </span>
  //   </span>
  // </span>
  //
  // New structure:
  // <span class="fc-button">[...]</span>
  //
  // I don't know how but elements fc-button-inner, fc-button-content and fc-button-effect
  // disappear automatically.
  $('.fc-button-content').each(function() {
    $(this).parent().parent().html($(this).html());
  });

Then you can simplify the CSS code (SASS) to:

// FullCalendar fc-button themed using Twitter Bootstrap

.fc-button.fc-state-default {
  @extend .btn;

  // .btn-group > .btn
  position: relative;
  //float: left;
  //margin-left: -1px;
  @include border-radius(0);
}

.fc-button.fc-state-active {
  @extend .btn.active;
}

.fc-button.fc-state-disabled {
  @extend .btn.disabled;
}

.fc-button.fc-state-disabled:active {
  @include box-shadow(none);
}

.fc-button.fc-corner-left {
  // .btn-group > .btn:first-child
  margin-left: 0;
     -webkit-border-top-left-radius: 4px;
         -moz-border-radius-topleft: 4px;
             border-top-left-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
      -moz-border-radius-bottomleft: 4px;
          border-bottom-left-radius: 4px;
}

.fc-button.fc-corner-right {
  // .btn-group > .btn:last-child, .btn-group > .dropdown-toggle
     -webkit-border-top-right-radius: 4px;
         -moz-border-radius-topright: 4px;
             border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
      -moz-border-radius-bottomright: 4px;
          border-bottom-right-radius: 4px;
}

joeldavuk · 2012-07-20T11:05:33Z

Here's tkrotoff's solution in .less

    /* FullCalendar fc-button themed using Twitter Bootstrap. */

    .fc-button.fc-state-default {
      .btn;

      /* .btn-group > .btn */
      position: relative;
      /*float: left;*/
      /*margin-left: -1px;*/
      .border-radius(0);
    }

    .fc-button.fc-state-active {
      .btn.active;
    }

    .fc-button.fc-state-disabled {
      .btn.disabled;
    }
    .fc-button.fc-state-disabled:active {
      .box-shadow(none);
    }

    .fc-button.fc-corner-left {
      /* .btn-group > .btn:first-child */
      margin-left: 0;
         -webkit-border-top-left-radius: 4px;
             -moz-border-radius-topleft: 4px;
                 border-top-left-radius: 4px;
      -webkit-border-bottom-left-radius: 4px;
          -moz-border-radius-bottomleft: 4px;
              border-bottom-left-radius: 4px;
    }

    .fc-button.fc-corner-right {
      /* .btn-group > .btn:last-child, .btn-group > .dropdown-toggle */
         -webkit-border-top-right-radius: 4px;
             -moz-border-radius-topright: 4px;
                 border-top-right-radius: 4px;
      -webkit-border-bottom-right-radius: 4px;
          -moz-border-radius-bottomright: 4px;
              border-bottom-right-radius: 4px;
    }


    /* Override some FullCalendar CSS properties that conflict with Twitter Bootstrap btn. */

    .fc-state-default .fc-button-inner {
      background: transparent;
      border-width: 0 0;
    }

    .fc-button-content {
      line-height: @baseLineHeight;
      height: @baseLineHeight;
      padding: 0 0;
    }

    .fc-state-default .fc-button-effect span {
      .buttonBackground(@btnBackground, @btnBackgroundHighlight);
    }

    .fc-state-active .fc-button-inner {
      color: @grayDark;
    }

AlecTaylor · 2012-09-01T18:49:11Z

Excellent, so is a pull request going to be made now?

:)

pruimmartin · 2012-10-24T14:13:28Z

Is this also available in regular css? Can someone post that? Many thanks!

brennovich · 2012-10-24T15:49:39Z

@pruimmartin https://gist.github.com/2582439 in all versions ;)

gtraxx · 2012-10-30T10:55:50Z

+1

crispinh2o · 2012-12-17T16:54:09Z

^ ^ very well resolved. regards!!

addyosmani · 2013-02-16T11:52:25Z

@gtraxx what would we like to do here?

brennovich · 2013-02-16T16:57:23Z

Solved. We should close this issue, no?

gtraxx · 2013-02-17T17:12:34Z

I have put the CSS file in a calendar :)
Thanks

NicoFerna · 2014-06-13T16:55:19Z

Hi, is there an updated version of this fix for Bootstrap 3?

addyosmani closed this as completed Feb 17, 2013

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support for Fullcalendar #37

Support for Fullcalendar #37

jensenkd commented Jan 17, 2012

panosru commented Jan 20, 2012

juarezpaf commented Jan 20, 2012

svnlto commented Jan 20, 2012

evoskuil commented Jan 22, 2012

addyosmani commented Jan 23, 2012

panosru commented Jan 23, 2012

evoskuil commented Jan 23, 2012

panosru commented Jan 23, 2012

addyosmani commented Jan 23, 2012

jensenkd commented Jan 25, 2012

PhilAndrew commented Feb 1, 2012

mericano1 commented Apr 28, 2012

brennovich commented May 3, 2012

panosru commented May 5, 2012

cheenu commented May 31, 2012

brennovich commented Jun 3, 2012

panosru commented Jun 3, 2012

tkrotoff commented Jun 11, 2012

joeldavuk commented Jul 20, 2012

AlecTaylor commented Sep 1, 2012

pruimmartin commented Oct 24, 2012

brennovich commented Oct 24, 2012

gtraxx commented Oct 30, 2012

crispinh2o commented Dec 17, 2012

addyosmani commented Feb 16, 2013

brennovich commented Feb 16, 2013

gtraxx commented Feb 17, 2013

NicoFerna commented Jun 13, 2014

Support for Fullcalendar #37

Support for Fullcalendar #37

Comments

jensenkd commented Jan 17, 2012

panosru commented Jan 20, 2012

juarezpaf commented Jan 20, 2012

svnlto commented Jan 20, 2012

evoskuil commented Jan 22, 2012

addyosmani commented Jan 23, 2012

panosru commented Jan 23, 2012

evoskuil commented Jan 23, 2012

panosru commented Jan 23, 2012

addyosmani commented Jan 23, 2012

jensenkd commented Jan 25, 2012

PhilAndrew commented Feb 1, 2012

mericano1 commented Apr 28, 2012

brennovich commented May 3, 2012

panosru commented May 5, 2012

cheenu commented May 31, 2012

brennovich commented Jun 3, 2012

panosru commented Jun 3, 2012

tkrotoff commented Jun 11, 2012

joeldavuk commented Jul 20, 2012

AlecTaylor commented Sep 1, 2012

pruimmartin commented Oct 24, 2012

brennovich commented Oct 24, 2012

gtraxx commented Oct 30, 2012

crispinh2o commented Dec 17, 2012

addyosmani commented Feb 16, 2013

brennovich commented Feb 16, 2013

gtraxx commented Feb 17, 2013

NicoFerna commented Jun 13, 2014