create Jalali calendar

[davodaslanifakor]

Hi I want vue-fullcalendar ad date Chang to vue-fullcalendar Jalali(persian) (Gregorian to Jalali calendar) how can i do that some like this

ho can i do that please guide me , Tanx for help ....

[BrockReece]

I'm not sure if fullcalendar has an option for this. It looks like some people are creating their own forks to add this functionality https://github.com/Natico/fullcalendar-Jalaali

If you are using webpack you should be able to add an alias so that fullcalendar will point at this new package. Something like this...

// webpack.base.conf.js
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      'fullcalendar$': 'fullcalendar-jalaali',
...

[davodaslanifakor]

@BrockReece look here

<template>
<div id='calendar'></div>
</template>
<script>
export default {
  name: 'app',
  methods:{

  },
  mounted(){
       $.getScript("/src/lib/moment/moment.js", function (e) {
        $.getScript("/src/lib/moment/moment-jalaali.js", function (e) {
             $.getScript("/src/lib/jquery/dist/jquery.js", function (e) {
                  $.getScript("/src/dist/fullcalendar.js", function (e) {
                      $.getScript("/src/lang/fa.js", function (e) {

                          $('#calendar').fullCalendar({
                            lang: 'fa',
                            isJalaali: true,
                            isRTL: true,
                            editable: true,
                            eventLimit: true, // allow "more" link when too many events
                            events: [

                              {
                                title: 'Long Event',
                                start: '2017-06-04T13:30:00',
                                end: '2017-06-04T13:30:00'
                              },

                            ]
                          });

                      })

                   })
             })

         })

       })
  },
  data () {
    return {

      events: [

        {
            title  : 'event1',
            start  : '2017-06-03T13:30:00',
            end    : '2017-06-03T15:30:00',
        }
      ]
    }
  }
}
</script>
<style>
    @import '~fullcalendar/dist/fullcalendar.css';
</style>

I load jalali calendar in vuejs but not fun for me i need better way for this ... how can i Chang my cod for access vue cod i dont use more this jquery cod ...not fun for my project .... how i can do ...

[BrockReece]

Why don't you import these js dependencies at the top of your script tag in your component? Like this...

<script>
  import 'path/to/moment.js'
  import 'path/to/moment-jalaali.js'
  import 'path/to/jquery.js'
  import 'path/to/fullcalendar.js'
  import 'path/to/fa.js'

  export default {
  ...
</script>

Just as an aside, this is a Vue wrapper for the fullcalendar library. In the code above, you are not using this wrapper at all.

Also, it appears as if you are using the config from the package that I linked you to, but you are not using their forked library.

I am happy to help you find a solution but I will need some info from you... Do you use webpack/browserify? Do you use npm/yarn for your dependencies?

[davodaslanifakor]

@BrockReece i know this cod not in vue-fullcalndar ... i want show you this way for jalali calendar ... but not fun in vue js ... so yes i use vue-cli(webpack.config.js and ....)

this is my package json

{
  "name": "calebdar",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "davodaslanifakor@gmail.com <davodaslanifakor@gmail.com>",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "fullcalendar": "^3.4.0",
    "jquery": "^3.2.1",
    "locale": "^0.1.0",
    "moment-jalaali": "^0.6.1",
    "vue": "^2.3.3",
    "vue-full-calendar": "^2.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-env": "^1.5.1",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "vue-loader": "^12.1.0",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}

this is my webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

with this condition What is the best solution? thanks for your help... :-)

[BrockReece]

Ok, I will try to help, but just to manage expectations, this is way beyond the scope of this package and may not work. I don't have the time to test this but these are the kind of steps I would try to get it to work.

As above, there is a fork of fullcalendar that adds Jalaali functionality. This fork doesn't appear to have a 'package.json' so you won't be able to use NPM/Yarn, you will need to manually download the 'fullcalendar.js' file and add it to your src dir.

My package imports 'fullcalendar' from the node modules folder, but using Webpack Resolve Aliases we can point Webpack at the forked version that you downloaded. In your webpack config above, find the 'resolve' part and then add to it like so.

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      'fullcalendar$': resolve('src/fullcalendar.js'),
    }
  },

At the top of your parent component, I would import moment and moment-jalaali at the top of your script tags.

<script>
  import 'path/to/moment.js'
  import 'path/to/moment-jalaali.js'
  import 'fullcalendar/dist/locale/fa.js'

  export default {
  ...
</script>

I would then build up the config you need in your Vue Component's data section

export default {
  data() {
    return {
      config: {
        lang: 'fa',
        isJalaali: true,
        isRTL: true,
        editable: true,
        eventLimit: true,
      },
    }
  },
}

And then add pass this through as a prop

<full-calendar :config="config"><full-calendar>

[BrockReece]

I have created a Jalaali branch on my example repo, that you can use as a guide. These are my exact changes and it worked for me.

n.b. I have had to edit the fullcalendar.js slightly to fix their usage of reserved keyword 'arguments' within strict mode.

[davodaslanifakor]

@BrockReece so i test this and report you tnx..

[davodaslanifakor]

Hi @BrockReece i come back

[BrockReece]

Hi @davodaslanifakor What's up?

[davodaslanifakor]

i change my cod

  import moment from 'moment'
  import momentJalaali from './fullcalendar-Jalaali-master/lib/moment-jalaali.js'
  import fa from './fullcalendar-Jalaali-master/locale/fa.js'

and isJalaali: true,

in file

'fullcalendar$' : './src/fullcalendar-Jalaali-master/fullcalendar.js'

and this is my err

but when i comment import fa from './fullcalendar-Jalaali-master/locale/fa.js'

and uncomment again this err not show but and load calendar default

but don;t load jalalicalendar...

remember i use this vue-fullcalendar Because cant use jalalibrance

[davodaslanifakor]

i think better is i upload my cod for you and test this please say your email thank you or has problem for say me your email please you create this jalailcalndar and send for me [davodaslanifakor@gmail.com](this is my email) thank you very much

[BrockReece]

Hi @davodaslanifakor

I don't mind helping you with issues to do with my libraries, but I don't have time to test/fix/write your code for you, especially when I have already provided you with a working example, so please don't send me your code.

That being said, I think there is something wrong with the way you are loading moment-jalaali. I load the module via the webpack.base.conf.js file, using Webpack Provide Plugin. I set the identifier to 'moment' to trick fullcalendar into using this different version of moment

This is in my example on [this line] (https://github.com/BrockReece/vue-fullcalendar-example/blob/jalaali/build/webpack.base.conf.js#L27 )

[davodaslanifakor]

ok i more try and report you thank you so much