Dark Series Theme Not Rendering Properly

[DaveL17]

Nice project. Thanks for sharing it.

I have had some trouble getting the dark series theme to work. When I apply the theme and css, it renders as a micro layout. This may have something to do with my environment. As a proxy, I'm running the default theme with custom css which suits my needs. Cheers.

jsCalendar 1.4.4 Vue 3.2.20 Vuex 4.0.2 Bootstrap 5.1.3 Safari 15.1

[GramThanos]

I checked the examples/theme%20darkseries.html and it works just fine for me. Can you post more info? (like image, maybe some code)

[DaveL17]

Surely. I tried both ~simple-jscalendar/themes/jsCalendar.darkseries.css and ~simple-jscalendar/themes/jsCalendar.darkseries.min.css with no difference in output. I thought there might be a conflict with Bootstrap; however, if I disable Bootstrap, my site fails to the extent that the results aren't meaningful. I see now too that the navigator controls also fail to render. (In the attached screen shot, the grey bar to the left is Safari's border).

Calendar.vue

<template>
  <div class="calendar">
    <div class="auto-jsCalendar black-theme"
         data-navigator-position="right"
         data-month-format="month YYYY"
         data-day-format="DDD">
    </div>
  </div>
</template>

<script>
  export default {
  data() {
    return {
    }
  },
    emits: ['page-data'],
    mounted() {

      this.$emit('page-data', {title: 'calendar', content: '',})
    },
    components: {
    },
  }
</script>

<style>

</style>

App.vue

<template>
  <div class="app">

    <div id="header_area">
      <Header/>
    </div>

    <div id="title_area">
      <p class="page-title">{{ title }}</p>
    </div>

    <div id="content_area">
      <p class="page-content">{{ content }}</p>
      <router-view @page-data="updatePageName($event)"/>
    </div>

    <div id="footer_area">
      <Footer/>
    </div>

  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
export default {
  data() {
    return {
    title: "home",
    content: ""
    }
  },
  components: {
    Header,
    Footer,
  },
  methods: {
    updatePageName: function(event) {
      this.title = event.title;
      this.content = event.content;
    }
  }
};
</script>

<style>
  @import '~bootstrap/dist/css/bootstrap.css';
  @import "./assets/navbar.css";
  @import "./assets/main.css";
  @Import '~simple-jscalendar/themes/jsCalendar.darkseries.css';

#content_area {
  white-space: pre-wrap;  /* honor string formatting */
}
</style>

main.js

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
import 'simple-jscalendar'
import 'bootstrap'

// ...

package.json

{
  "name": "my_spa",
  "version": "0.1.32",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "chart.js": "^3.6.0",
    "chartjs-plugin-annotation": "^1.1.0",
    "chartjs-plugin-datalabels": "^2.0.0",
    "core-js": "^3.19.0",
    "jquery": "^3.6.0",
    "monorepo": "github:gilnd/vue3-smooth-dnd",
    "simple-jscalendar": "^1.4.4",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vue3-smooth-dnd": "^0.0.2",
    "vuex": "^4.0.2",
    "vuex-persist": "^3.1.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.13",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "^4.5.13",
    "@vue/cli-service": "^4.5.13",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint-plugin-vue": "^7.20.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

[DaveL17]

With default jsCalendar css (not darkseries)

With custom css overrides

[GramThanos]

The darkseries theme extends the default themes, thus you should include both the jsCalendar.css and the jsCalendar.darkseries.css

@Import '~simple-jscalendar/source/jsCalendar.css';
@Import '~simple-jscalendar/themes/jsCalendar.darkseries.css';

I think this is the problem.

[DaveL17]

Bingo. Excellent sleuthing. Thanks.

Might I suggest a small revision to the Themes section of the docs to add @Import '~simple-jscalendar/source/jsCalendar.css'; to the examples?

Appreciate the help. Feel free to mark this one closed. Cheers!

[arand013]

Hey I managed to make the dark series function on my test page. Steps:

1: Reviewed docs https://unpkg.com/browse/simple-jscalendar@1.4.4/themes/jsCalendar.darkseries.min.css

2: Duplicate this doc into my VS code in a style.css file

3: Linked this CSS file to index.html

[DaveL17]

Closing this issue as no further action is needed.