Using bootstrap 4 themes

[soaresdude]

How can I use the bootstrap 4 themes? I could only find how to use the default theme, but in the fullcalendar page they talk about using more themes.

[BrockReece]

According to the docs, it looks like you just need to include the bootstrap 4's css file somewhere in your project and add the following key to your calendar config.

themeSystem: 'bootstrap4'

[araujoyuri]

@BrockReece Yeah, that part worked just fine, but I couldn't use other themes from bootstrap like Cosmo, which is referenced in the fullcalendar page.

[BrockReece]

I've never tried it before, but reading their docs, it sounds straight forward.

Using the themes is as easy as downloading a CSS file and replacing the one that comes with Bootstrap.

And here is a link to their CDN
https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/cosmo/bootstrap.min.css

I don't think there is any specific config that you need to change on the calendar, other than what I suggested above. I am guessing that the full-calendar bootstrap theme adds classes to the calendar's elements which will be targeted by your bootstrap's css, regardless of what theme you are using in your project.

[araujoyuri]

@BrockReece the problem is that I don't use bootstrap in my project, only bulma. I thought that I could apply a bootstrap 4 theme only on the fullcalendar component without interfering with the rest of the project.
I've tried to do like this:

mounted () {
      if (document.getElementById('calendar')) return
      let scriptTag = document.createElement('script')
      scriptTag.src = 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/cosmo/bootstrap.min.css'
      scriptTag.id = 'bootstrap-theme'
      document.getElementsByTagName('head')[0].appendChild(scriptTag)
    },

config: {
          locale: 'pt-br',
          editable: false,
          defaultView: 'month',
          selectable: true,
          themeSystem: 'bootstrap4'
        }

But I had the same problem, couldn't use the Cosmo theme inside the calendar.

[BrockReece]

I don't think it works like that, I am pretty sure Fullcalendar applies classes to elements that your CSS will style to keep it consistent with the rest of your page.

Looking at your code above, I would suggest that using document.createElement('script') is incorrect, as this is a CSS file. Couldn't you just add a link tag to the head of your index.html?

Full disclosure BTW, I am not the author of Fullcalendar, this repo is a fairly transparent wrapper over Fullcalendar that makes it easier to use with Vue. I haven't tested out every single config, permutation and edge case of Fullcalendar personally. I am just reading their docs to try and help you.

[araujoyuri]

@BrockReece have you found on the docs how to style them? I've tried the className for events and the header object to set the icons but it didn't worked.

Totally my mistake, sorry. I'll try to fix that.

Don't worry, I'm glad that you're helping me.

[araujoyuri]

It worked! I've added the import to my style script tag. It came out like this:

<style scoped>
  @import 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/cosmo/bootstrap.min.css';
</style>

  export default {
    data() {
      return {
          config: {
          locale: 'pt-br',
          editable: false,
          defaultView: 'month',
          selectable: true,
          themeSystem: 'bootstrap4'
        }
      }
    }
   }

<div class="control">
      <full-calendar :events="events" :config="config"/>
</div>

And now, the theme was applied to my calendar. Thanks a lot for the guidance @BrockReece 👍

[langtuflame]

It worked! I've added the import to my style script tag. It came out like this:

<style scoped>
  @import 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/cosmo/bootstrap.min.css';
</style>

  export default {
    data() {
      return {
          config: {
          locale: 'pt-br',
          editable: false,
          defaultView: 'month',
          selectable: true,
          themeSystem: 'bootstrap4'
        }
      }
    }
   }

<div class="control">
      <full-calendar :events="events" :config="config"/>
</div>

And now, the theme was applied to my calendar. Thanks a lot for the guidance @BrockReece 👍

hello. Can you share me project example? I'm trying following you but i can't add theme bootstrap 4 in my project :(