tomosterlund / qalendar Goto Github PK

Thank you for making your excellent Qalendar project!

Today I created a a new Vue 3.0 (Vite 3.0) Project with npm init vue@latest and then added 'qalendar' via npm i qalendar
and I could only see the 'DAY' Mode and in the top-selection only the day-picker.

I tried config = { defaultMode: "month" } without success

BROWSER:
latest FF or Chrome

CODE:

<template>
  <qalendar :events="events" :config="config" />
</template>

<script setup>
import { Qalendar } from "qalendar";
import { ref } from "vue";

const events = ref([
  {
    title: "Advanced algebra",
    with: "Chandler Bing",
    time: { start: "2022-07-22 12:05", end: "2022-07-22 13:35" },
    color: "yellow",
    isEditable: true,
    id: "753944708f0f",
    description: "Lorem ipsum dolor"
  }
]);

const config = ref({
  defaultMode: "month",
  isSilent: false,
});
</script>

<style>
/** Please observe, that your path to the node_modules directory might be different */
@import "../../node_modules/qalendar/dist/style.css";
</style>

SCREENSHOT:

Please maybe you can help me and explain why it does not work to show 'week' or 'month'.

with best regards in advance

woko

Describe the bug
the scroll option can't work with hour 00:00
when I try to scroll to 0 it scrolls to 8H

To Reproduce

 config: {
      ...
        week: {
           startsOn: "monday",
         ...
          // Scroll to a certain hour on mounting a week. Takes any value from 0 to 23.
          scrollToHour: 0,
        },
     ...
}

Expected behavior
Scrolling to 00:00 onmounted

Context:

• Browser : Chrome Version 107.0.5304.107
• Browser : Firefox version 106

I'm not sure if this is a bug or just this feature is missing. Events that have 'isCustom' set to 'true' don't change their style when the calendar is in mode "Month". I want for example to not display any time before the event title (the example from Docs for Custom Events), but this only works for "day" and "week" calendar modes.

Hellow, I appreciate this package and really I need it,
I run vue 3 project with [email protected],
I install this package and I try to test the package but I have one error and many warnings, I don't if there is incompatibility of versions

Hello, first of all thank you for your time in creating Qalendar.

I am new to this and I have been unable to get the Calendar UI out correctly.

I have only been testing the Qalendar, following the scripts in the documentation. As such, I am a bit lost as to why the UI would not show up as expected. Here is my code:

  <Qalendar
    :selected-date="new Date(2022, 0, 8)"
    :events="events"
    :config="config"
  />
</template>

<script>
import { Qalendar } from "qalendar";
export default {
  components: {
    Qalendar,
  },
  data() {
    return {
      events: [
        {
          title: "Meeting with Dora",
          with: "Albert Einstein",
          time: { start: "2022-01-01 04:52", end: "2022-01-01 05:37" },
          color: "green",
          isEditable: true,
          id: "de471c78cb5c",
          description:
            "Think of me as Yoda. Only instead of being little and green, I wear suites and I'm awesome.",
        },
        {
          title: "Advanced algebra",
          with: "Pheobe Buffay",
          time: { start: "2022-01-02 20:05", end: "2022-01-02 21:35" },
          colorScheme: "sports",
          isEditable: true,
          id: "6d3c0980a5cf",
          description:
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda corporis doloremque et expedita molestias necessitatibus quam quas temporibus veritatis. Deserunt excepturi illum nobis perferendis praesentium repudiandae saepe sapiente voluptatem!",
        },
        {
          title: "Break",
          with: "Marshall Eriksen",
          time: { start: "2022-01-02 22:10", end: "2022-01-02 22:55" },
          colorScheme: "meetings",
          isEditable: true,
          id: "9f1b209982f1",
          location: "Zoom",
        },
      ],
      config: {
        defaultMode: "month",
        style: {
          colorSchemes: {
            meetings: {
              color: "#fff",
              backgroundColor: "#131313",
            },
            sports: {
              color: "#fff",
              backgroundColor: "#ff4081",
            },
          },
        },
        week: {
          // Takes the value 'sunday' or 'monday'
          // However, if startsOn is set to 'sunday' and nDays to 5, the week displayed will be Monday - Friday
          startsOn: "monday",
          // Takes the values 5 or 7.
          nDays: 7,
          // Scroll to a certain hour on mounting a week. Takes any value from 0 to 23.
          // This option is not compatible with the 'dayBoundaries'-option, and will simply be ignored if custom day boundaries are set.
          scrollToHour: 5,
        },
        month: {
          // Hide leading and trailing dates in the month view (defaults to true when not set)
          showTrailingAndLeadingDates: false,
        },
      },
    };
  },
};
</script>

<style scoped>
@import "@/../node_modules/qalendar/dist/style.css";
</style>```

I've been very happy with this lib so far, but I needed a little more flexibility on the event flyout, so I've implemented them on the flyout-options branch of my fork:
https://github.com/hugoaboud/qalendar/tree/flyout-options

I've added 2 options and 1 feature:

• eventDialog.absolutePosition: If true, the dialog is positioned within the calendar week, so it's always next to the event that opened it and not "floating".
• eventDialog.disableCloseOnClickOutside: If true, clicking outside the dialog won't close it.
• qalendar.closeFlyout(): Exposed a method on the ref to close the flyout externally.

The first one is a UX preference of the current project I'm working on.
The second and third allows the application to take full control of the event dialog, when using isCustom (I haven't found an easy way to close the dialog from a custom close button, please let me know).

Please let me know if it's interesting for the main project, and what changes might be necessary.

Hi! It's me again, sorry for the intrusion :)

There is such a situation: if calendar is opened in a mode, which is not set in config as "defaultMode", then at the slightest change of window size - the mode is reset to the value in config (although it is not necessary to), and we see such a jump, as on the video.

Besides, it seems to me, that we should add "emit" (the same as @updated-mode) for just such a situation, which will inform us, that the mode of display has changed at increase/decrease of window size (not only by clicking on modes menu).

Thanks!

Right now according to the documentation, there is no way to find out the time user clicked in the calendar view - only date is getting referenced. Are there plans to enable time to be returned in the click event? Any workaround possible to achieve this result? That would be useful if the app wants to implement the functionality to create an event right from the calendar view.

Thank you!!

Hi, are there any plans to allow calendar view by month on small screens? For example, shifting the columns(cell) to the next line or horizontal scrolling?

Thanks!!!

Is your feature request related to a problem? Please describe.
When browsing through weeks in the calendar, the arrows can move from week to week, probably due to the difference in total number of digits of some dates displayed in the window next to the arrows.

For example, 23-1-2023 - 29-1-2023 is longer than 30-1-2023 - 5-2-2023, making the navigational arrows to the left of the box displaying the dates move a bit to the right.

Describe the solution you'd like
I'd like the arrows to stay in 1 position, making it easier to click them at the same position consistently.

Additional context
Personally I'd recommend using leading zeros, but I could understand if this would be a change not everyone would like.
Perhaps changing it into a optional prop could give users the choice?

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update devdependencies (non-major) (@commitlint/cli, @commitlint/config-conventional, @vitest/coverage-c8, @vue/test-utils, @vue/tsconfig, eslint, eslint-plugin-vue, sass, semantic-release, stylelint, typescript, vitepress, vitest, vue-tsc)

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Describe the bug
I have an app that has many events and the time of the event can be long one.
So if I click on week mode the cards are one on top of the other.
here is one screen shot

Is there any way to make it look better?

Thank you in advance.

For custom event layout in the calendar, the resizing isn't working

Is your feature request related to a problem? Please describe.
I would like to highlight the current day (particularly in month mode, but good to have for week as well) with a different background color as a quick way to find where the current day lives on the calendar. I can currently do this with some vanilla JS work, but it doesn't feel super nice to use vanilla JS in vue.

Describe the solution you'd like
An optional configuration property would be the easiest as a user, but even just a class we could style for the current day would be great.

Additional context
An example of what I've manually created in my project with the 26th being the current date:

Hey! Thanks for this project.

I'm using this one and I need to configure it for Brazilian Portuguese (pt-BR).

So I made some changes but I don't have permission on the project:

keys.ts
`
export const languageKeys = {
/** The following three keys, describe the calendar modes */
week: {
"it-IT": "Settimana",
"en-US": "Week",
"de-DE": "Woche",
"sv-SE": "Vecka",
"zh-CN": "周",
"pt-BR": "Semana",
},
month: {
"it-IT": "Mese",
"en-US": "Month",
"de-DE": "Monat",
"sv-SE": "Månad",
"zh-CN": "月",
"pt-BR": "Mês",
},
day: {
"it-IT": "Giorno",
"en-US": "Day",
"de-DE": "Tag",
"sv-SE": "Dag",
"zh-CN": "日",
"pt-BR": "Dia",
},

/** Other keys */
moreEvents: {
"it-IT": "+ altri eventi",
"en-US": "+ more events",
"de-DE": "+ weitere Ereignisse",
"sv-SE": "+ fler händelser",
"zh-CN": "列出其他结果",
"pt-BR": "+ mais eventos",
},
};
`

index.ts
`
import { languageKeys } from "./keys";

export default {
data() {
return {
languageKeys,
};
},

methods: {
getLanguage(languageKeys: any, locale: string) {
if (locale.startsWith("de")) locale = "de-DE";
if (locale.startsWith("en")) locale = "en-US";
if (locale.startsWith("it")) locale = "it-IT";
if (locale.startsWith("sv")) locale = "sv-SE";
if (locale.startsWith("zh")) locale = "zh-CN";
if (locale.includes("BR")) locale = "pt-BR";

  return languageKeys[locale]
    ? languageKeys[locale]
    : languageKeys["en-US"] || "";
},

},
};
`

Devtools.vue
<select id="locale" v-model="locale" name="locale"> <option value="en-US">en-US</option> <option value="de-DE">de-DE</option> <option value="sv-SE">sv-SE</option> <option value="ja-JP">ja-JP</option> <option value="ru-RU">ru-RU</option> <option value="zh-CN">zh-CN</option> <option value="pt-BR">pt-BR</option> </select>

Could I send the changes in a Pull Request or could you apply the codes above, please?

Is your feature request related to a problem? Please describe.
Hi, i need to hide the datepicker (red line) and change the dropdown for modes (blue line) for a inline toggle.

Describe the solution you'd like
It's need to create props to hide this elements and scoped slots (exposing the function to change modes) for user can customize the layout more

Additional context
I'll appreciate if can expose the function to change modes in the component accesing by ref the component.

<qalendar ref="calendar" />

...
const qalendar = ref(null);
qalendar.value.changeMode('month');

Describe the bug
I created a very simple test component to test this library and it seems like that the events are not updated when I push a new one. I can see that my stateful array is updating because I was printing it on top of the calendar. Only Qalendar is not reacting to any changes.

To Reproduce
Steps to reproduce the behavior:

1. Follow the Documentation setup
2. Use the composition API and create a stateful variable const events = ref<any>([])
3. pass it to the :events attribute in
4. Push a new event to events variable
5. Nothing happens

Expected behavior
New event should appear in calendar

Screenshots

Context:

• Browser Chrome
• Nuxt3 (3.0.0)
• Qalendar (2.5.0)

Additional context

<template>
  <div>
    <ClientOnly>
      {{ events }}
      <Qalendar
        :events="events"
        @day-was-clicked="onDayClicked"
      />
    </ClientOnly>
  </div>
</template>

<script setup lang="ts">
import { Qalendar } from 'qalendar'

const events = ref<any>([])

function onDayClicked(e: any) {
  console.log('DAY', e)

  events.value.push({
    title: 'Advanced algebra',
    with: 'Chandler Bing',
    time: { start: '2023-05-16 08:00', end: '2023-05-16 09:00' },
    color: 'red',
    isEditable: true,

    id: '12',
    description: 'test'
  })
}
</script>

<style>
@import 'qalendar/dist/style.css';
</style>

Is it possible to implement this in a month view same in week view?

When there is only one mode available (i.e disableModes as been used for two modes), the UI will be cleaner if we automatically hide the mode select dropdown. Example below -

I see we have this behaviour when only day mode is available:

But I'd propose to modify this code:

onlyDayModeIsEnabled() {
const weekIsDisabled = this.config.disableModes?.includes('week');
const monthIsDisabled = this.config.disableModes?.includes('month');

  return this.config.disableModes && weekIsDisabled && monthIsDisabled;
},

To implement "onlyOneModelIsAvailable" to handle cases where dayIsDisabled and weekIsDisabled but month is not disabled. I.e:

onlyOneModeIsAvailable() {
return this.config.disableModes?.length === 2
},

When you select the calendar mode, the modes in english are displayed if no other setting is set.

Hello, im trying to display the month this way :

but the display im getting is this:

the isSmall in config did not work, what im doing wrong?

Is your feature request related to a problem? Please describe.
I'm building a custom header to control the calendar and would like to access the built-in methods to switch to the previous/next period from custom elements.

Describe the solution you'd like
Adding a ref on date picker element and a method to that in turn exposes the goToPeriod method to the top level

Is your feature request related to a problem? Please describe.
Would be great to add a functionality to split events by categories, for example by users.

Describe the solution you'd like
A good example of the solution is Vuetify calendar (https://vuetify.cn/en/components/calendars/#:~:text=6-,Category,-This%20is%20an)

Thank you for your work :)
Best regards.

Describe the bug
I want to show custom content in the event dialog

To Reproduce
Steps to reproduce the behavior:

        <template #eventDialog="props">
          <div v-if="props.eventDialogData && props.eventDialogData.title">
            <div :style="{marginBottom: '8px'}">
              Edit event
            </div>

            <input class="flyout-input" type="text" :style="{ width: '90%', padding: '8px', marginBottom: '8px' }">

            <button class="close-flyout" @click="props.closeEventDialog">
              Finished!
            </button>
          </div>
        </template>

Expected behavior
show. the. custom template in dialog

Screenshots
If applicable, add screenshots to help explain your problem.

Context:

"qalendar": "^2.0.0-beta.1",

i would like to add new events 'on-click' on the dates

i dont know if the feature is available. If there, please guide me , on how to add new events by selecting a date by clicking the date in calender.(in month view)
ps: I'm using vue 3.

Hello, I saw in documentation that you use optionAPI and I want to know if this package support composition API or not ?

regards.

Sorry if this is not the right place to submit this. I was wondering if there is a roadmap for supporting actions (drag/drop) for mobile devices. I found a reference that it's not currently supported, and since majority of users these days are relying on the mobile device support - decided to ask. Thank you for a great tool!!

Hello! I encountered a problem, is it a bug or not?
If the event is longer than a day and has a time, it is displayed only in the day of the event start.
This applies to all three display modes.

If there is no time in the date, it is displayed correctly.
Thank you!

Context (REQUIRED):

• Browser: Chrome
• Browser version: Version 119.0.6045.159 64-bit
• Qalendar Version v3.6.0

Describe the bug (REQUIRED)

Clicking event in month view also triggers date-was-clicked

Is your feature request related to a problem? Please describe.
Hello, I'm back again 😅

I've been loving the new additions and the dark mode looks wonderful!

For this new idea I'm bringing forward it's very possible that I've missed a way to do this in the documentation somewhere (or that this is a bug), but the problem I've noticed is that when going down to the mobile agenda view in month mode and clicking on a day, my events don't use the custom month event view that I've created using the monthEvent slot. They're back to the default configuration as seen in Additional Context below.

Describe the solution you'd like
What would be most convenient in my use-case would just be having the agenda view respect the monthEvent slot I'm already using. However, there could be an argument for having an agenda view slot specifically, though I would imagine that's considerably more work, especially if no one is explicitly requesting it at this time.

If this is something attainable for a new contributor to Qalendar then I'd be happy to try my hand at it!

Additional context

Desktop month events

Mobile month events

Is your feature request related to a problem? Please describe.
When using the slot for weekday events, I am unable to resize the events, only drag.

Describe the solution you'd like
I would like to be able to resize my events regardless of using a slot or the default template.

Is your feature request related to a problem? Please describe.
My calendar has room for more than 3 events to be displayed.

Describe the solution you'd like
I would like to be able to set the number of events that can be displayed before showing the "+ more events" link. Something like minShowMore in the config.

Additional context
Current:

In this case I would set the "minShowMore" to 5 (or 4 depending on the logic)

For documentation purposes, because within the projects kanban board no pictures can be uploaded.

To Reproduce
Click on a calendar entry then navigate thou the docs.

HI.
If I wanted to print the weekly calendar full page there is no way to do it.
Printing full pages with time from 7am to 10pm in order to slightly increase the viewing portion of the events

First of all, I really love this package! Super light and easy to use.

So I was looking for a calendar that shows a weekly events and thankfully I found this package. I got it working with some few mods using CSS etc. Read the docs to explore more features but after several minutes of circling around your docs, I can't find a setting/option where I can select what time the calendar (week view/mode) should start and end.

Below is the screenshot of the app I'm working on. As you can see, it's a school schedule - classes starts as early as 6am and the last period ends at 8/9pm. Space consumed by 12mn to 6am is a bit long that a user needs to scroll down to start seeing their schedule.

So yea, maybe a feature/options/settings that's something like this :) I'd like to have my calendar to start at 5am then ends at 10pm - that way it still have a space/allowance after the header and before the bottom of the calendar.

Thank and more power!

Is your feature request related to a problem? Please describe.

On this image, dates of previous month are rendered, I want to decide to render it or not

Context:

• Chrome in mobile dev mode (120) / Safari on iOS (17.2)
• Qalendar (3.5.1)

Describe the bug
On mobile device, the select range (Day, Week, Month), only shows (Month and Week) options.

To Reproduce
Reproductible on the documentation: Qalendar guide

1. Setup a standard Qalendar with no specific options (no disableModes).
2. Open your browser on mobile dev mode/ Or go on Android/iOS and open Chrome/Safari
3. Click on the range selector

Expected behavior
I want the same number of options in desktop and mobile: Day, Week, Month.

Screenshots

iPhone/Safari - Chrome mobile mode

I want to use the Week/Day view as a scheduling tool, so I need the intervals to have states.

I've implemented a sample at the interval-states branch of my fork:
https://github.com/hugoaboud/qalendar/tree/interval-states

It adds a intervalStates prop to <Qalendar>, which is a list defining which intervals should be customized:

intervalStates: [
    {
      date: '2023-05-05',
      interval: 1,
      hidden: true
    },
    {
      date: '2023-05-04',
      interval: 3,
      color: '#900',
      disabled: true
    }
] as dayIntervalsStateType[],

So it appears like that:

I haven't implemented any tests yet, so I can evaluate your interest before.

It also implements a highlight on hover and click for intervals.

Is your feature request related to a problem? Please describe.
The current month view of calendar is not very professional

Describe the solution you'd like
We may consider show a calendar and. the depending on the day select show events

Additional context

Thanks again for your great project!

I have a running project with Vuetify 2.6.7 and working with their Calendar element. Unfortunately Vuetify 2.6.7 is not VUE 3 compatible and the next version 3.0 is not only delayed but will no longer support the Calendar element in this form. While looking for a calendar, your project appealed to me and I liked it very much.

Our project needs quarter hourly intervals in the week/day overview starting from e.g. 8:00, 8:15 ... to 16h00 ending. We have to to enter events, with a click-event fired when the interval is clicked e.g. 9:15. The ability to click into an interval and define an event here via the @click:interval would be a feature that might be of interest to others. I think there are a lot of people who have worked with the Vuetify Calendar component and are now facing the problem like me, that this Calendar is no longer supported in the upcoming VUE3 compatible Vuetify version.

The interval props of Vuetify 2.6.7 are shown here and the calendar here

Perhaps you could accept this suggestion as a Feature request.

with best thanks in advance

wotamann

Is your feature request related to a problem? Please describe.
Perhaps I am missing some configuration, but does the Qalendar requires, for example, events to have 'title' and I could not change the title to 'subject'? (if I do it now, it disappears from the display with

Describe the solution you'd like
When working with for example Microsoft Graph which brings events in quite a different format, it would take some coding to change Events.title to event.subject

Additional context
Great Plugin, good job. Thank you!

Context :

• Browser : Edge
• Qalendar Version v.3.5.0

**Describe the bug **
I have set my computer to dark mode and I want Qalendar to apply light mode, so I wrote the following code.

<template>
  <v-card min-height="">
    <v-card-title>
      {{ t("eip.uploadedWorkHour") }}
    </v-card-title>
    <v-card-text style="color-scheme: light" >
      <Qalendar  :events="events" :config="config" style="min-height: 600px;" />
    </v-card-text>
  </v-card>
</template>

but my Qalendar still dark, Is there an error in my configuration method? Thank you.

Is your feature request related to a problem? Please describe.
We sometime need to change bg color for weekend, but currently I see no class for it.

Is your feature request related to a problem? Please describe.
Currently, on agenda view, when you click on a specific time, it only returns. the that, it should also includes time

Additional context

    "qalendar": "^2.0.0-beta.1"

Context (REQUIRED):

• Browser : chrome
• Browserversion : 116.0.5845.190
• Qalendar Version 3.5.0

Describe the bug (REQUIRED)

I put a "disableDnD : ['day', 'week', 'month']" in config but it doesn't work. Events are still dragable.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Context:

• Browser [e.g. chrome, safari]
• Version [e.g. v1.0.0]

Additional context
Add any other context about the problem here.

Is your feature request related to a problem? Please describe.
Some cultures or contexts work best with a calendar that starts on Sunday, others work better with Monday. Currently, Qalendar only allows Monday as the start date of the week.

Describe the solution you'd like
I would like an option added to props that sets a firstDayOfWeek property. For example:

...
props: {
        events: Array,
        config: {
          defaultMode: 'month',
          firstDayOfWeek: 'sunday'
        }
...

Thanks for your consideration

Hi! Thank you for your work!
Is it possible to add event, after an day in the calendar was clicked?

Hello,
firstly thank you for this helpful component.

The issue that is made is in configuration of dayBoundaries : I want to set times begin from 08:00 to 07:00 of the next day or from any start time that can be > than end time , and it is not possible with this version of dayBoundaries

Reproduction URL

you can see here a reproduction of this issue

Css exports missing on package.json
Please change exports from

  "exports": {
    ".": {
      "import": "./dist/qalendar.es.js",
      "require": "./dist/qalendar.umd.js"
    },
  },

to

  "exports": {
    ".": {
      "import": "./dist/qalendar.es.js",
      "require": "./dist/qalendar.umd.js"
    },
    "./dist/style.css": {
      "import": "./dist/style.css",
      "require": "./dist/style.css"
    }
  },

this will allow normal imports to be used

@import "qalendar/dist/style.css";