Creating a straightforward timeline with CSS Grid, Vue.js, and moment.js/date-fns

Question

Creating a straightforward timeline with CSS Grid, Vue.js, and moment.js/date-fns

I have created a basic calendar using Vuejs, momentjs, and css-grids layout. However, the calendar currently starts with Sunday (in American style) and I would like to change it to start with Monday (European style). I attempted to modify the column method by decrementing it to 2, but it only displays August and other months incorrectly starting with the wrong weekdays. Additionally, I believe I need to adjust the css option grid-template-columns to accommodate Mondays as the first days of the week.

You can view the codepen here: https://codepen.io/moogeek/pen/oNWyWvM

// Vue instance code goes here
// CSS styling code is here
// HTML structure code is presented below in the next block

upd. I have found a better solution which involves separating weekdays and days into different containers and adding the grid-column:7 property to the first day child. I also adjusted the column function so it no longer adds additional offset:

https://codepen.io/moogeek/pen/ExmRzgb

After implementing this update, the August month now displays correctly upon mounting. However, when I click on previous or next months, the display gets messed up and shows September's days order for all months. Can you please help me identify what I am doing wrong and how I can fix the code to ensure all months are displayed properly?

javascript vue.js calendar css-grid

Answer 1

Answer №1

For those interested, I have implemented a modern solution using date-fns, which can be accessed on GitHub at: https://github.com/kissu/so-date-fns-calendar

You can also find the hosted version here:

Below is the relevant code snippet that demonstrates the functionality:

<template>
  // Code snippet goes here
</template>

<script>
  // JavaScript logic here
</script>

<style scoped>
  // Styling information here
</style>

After thorough testing one year before and after, all functionalities appear to be working seamlessly. Feel free to reach out for any additional clarifications/comments!

Additionally, I opted for a Nuxt application for quick development, but rest assured that the provided code is fully compatible with vanilla Vue.

Answer 2

For those interested, I have implemented a modern solution using date-fns, which can be accessed on GitHub at: https://github.com/kissu/so-date-fns-calendar

You can also find the hosted version here:

Below is the relevant code snippet that demonstrates the functionality:

<template>
  // Code snippet goes here
</template>

<script>
  // JavaScript logic here
</script>

<style scoped>
  // Styling information here
</style>

After thorough testing one year before and after, all functionalities appear to be working seamlessly. Feel free to reach out for any additional clarifications/comments!

Additionally, I opted for a Nuxt application for quick development, but rest assured that the provided code is fully compatible with vanilla Vue.

Answer 3

Answer №2

Recently, I made a temporary adjustment to include an extra check that prevents assigning the grid-column property if the first day of the current month falls on a Sunday. To see the implementation, you can visit: https://codepen.io/moogeek/pen/JjNBBqo

<div v-for="(day, index) in days"
    :data-date="day.format('DD.MM.YYYY')" 
    :style="{gridColumn:setGridColumn(index)}"
    :class="{ day, today: isToday(day) }">
    <span>{{ day.format('D') }}</span>
</div>

//inside methods
setGridColumn(index){
      return (this.days[0].startOf('month').format('e')!=6) ? this.column(index) : null;
}

Are there perhaps alternative solutions or concerns about potential bugs arising from this approach?

Answer 4

Recently, I made a temporary adjustment to include an extra check that prevents assigning the grid-column property if the first day of the current month falls on a Sunday. To see the implementation, you can visit: https://codepen.io/moogeek/pen/JjNBBqo

<div v-for="(day, index) in days"
    :data-date="day.format('DD.MM.YYYY')" 
    :style="{gridColumn:setGridColumn(index)}"
    :class="{ day, today: isToday(day) }">
    <span>{{ day.format('D') }}</span>
</div>

//inside methods
setGridColumn(index){
      return (this.days[0].startOf('month').format('e')!=6) ? this.column(index) : null;
}

Are there perhaps alternative solutions or concerns about potential bugs arising from this approach?

Creating a straightforward timeline with CSS Grid, Vue.js, and moment.js/date-fns

Answer №1

Answer №2

Similar questions

What is the best way to implement click-to-play functionality for my HTML5 videos without disrupting the built-in controls?

Contrast objects and incorporate elements that are different

What is the process for establishing Many-to-Many connections with personalized field titles using Bookshelf.js?

refresh PHP scripts using asynchronous JavaScript and XML (AJAX)

Proceed to the section with modal

How can I retrieve elements from an array that match a certain criteria and update the corresponding objects in

What method is most effective for transferring arrays from C# to Javascript in a simple and straightforward manner?

What sets React$Element apart from ReactElement?

React component fails to re-render after state change

Iterating through two classes in a Javascript loop

Is the use of Youtube API with an unaffiliated laborer

The concept of Event Flow in JavaScript

Switching Between HTML Using Javascript

The lookAt function in threeJS seems to be pointing in the opposite direction due to inherited rotations

Difficulty accessing class functions from the test application in Node.js NPM and Typescript

What is the method to retrieve the local filepath from a file input using Javascript in Internet Explorer 9?

Tips for avoiding a 500 GET error due to an empty request during page loading

What are some creative ways to incorporate a MobX store into a utility function?

Adjusting the Image Width in React to Match Bootstrap Column Width

Using multiple onChange and value attributes in React to handle different input fields and