julienr114 / vue-calendar-heatmap Goto Github PK

View Code? Open in Web Editor NEW

262.0 7.0 85.0 240 KB

A lightweight calendar heatmap Vuejs component built on SVG, inspired by github's contribution calendar graph

JavaScript 39.76% Vue 60.24%

vuejs component svg calendar-heatmap heatmap

vue-calendar-heatmap's People

Contributors

Stargazers

Watchers

Forkers

thomasleveil mediaveille jwigley mtfum dwedaz paulogriffin schlunsen karthik-viswanath razorness louisgaillet jsodeman donnype focalrevenue natescarlet shanozen oekn5w wakinaki belowst augur pidanmeng m-vinc ilovebug kingdavethebest thebentern zeroxer changjoo-park bmwant phinome nagos wand2016 anhnt2309 ryooo k3bra guillaumeduhan bobsynfig massimiliano76 beckproduct keadinzhou kvalev lutoma maingart 404hiro apicore-engineering wwwk zhb2000 stschmaltz kiddten hk2faith thanhpk chenyuan8059 pbbisme abdulkarimomer lvxiuyuan hangnhat57 wolframmfg dannychi mmalvar13 yangchenjian x-tfrk alexwang516 pengchant l2069060095 melzas dexif xieweikang123 wtt2015 codetoysrus

vue-calendar-heatmap's Issues

Licence does not exist

Hello,

I'm glad to see that someone else has done it before I design and code github-like heatmap calendar. But unfortunately this repository has no licence and does not represent anything about usage. If you ever relase it under M.I.T. licence, I'd be happy to have your code in my open-source project github.com/ikidnapmyself/vision

Cosmic regards!

Not working on mobile?

Make tooltip message customizable

Hello

By default the tooltip message consists of day.count and intensity. it will be cool if the message is customizable (at least on the first part)

Thanks

map for future calendar

the caledar cant display future day. the calendar only show the day < now.

i try to fork your github and change
v-if="day.date < now"
to

v-if="day.date >= now"
but still not working

Doesn't work with nuxt

Vue3 Support

Are there any plans for vue3 support?

when change lenguaje to months

How to change domain to either month, year....

Would be great if this was possible

How to show only specific month

for example if i was in the month of october i want to only see the heatmap for the month of october.

how to make monday the first day of the week?

Is there any hidden setting for displaying monday as the first day of the week?

Missing required prop: "endDate"

Vuejs 2.5.17 on Firefox & Chromium

minimal example

<!DOCTYPE html>
<html>
  <meta charset="UTF-8"> 
<head>
  <title>Welcome to my Heatmap</title>
  <script src="./vue.js"></script>
  <link rel="stylesheet" href="./vue-calendar-heatmap.css"/>
  <script src="./vue-calendar-heatmap.browser.js"></script>
</head>
<body>
  <div id="app">
    <calendar-heatmap :endDate="today" :values="values"/>
  </div>
  <script>
      
    new Vue({
      el: '#app',
      components: {
        VueCalendarHeatmap
      },
      data: {
        today: new Date(),
        values: [{ date: '2018-09-22', count: 6 }]
      },
    });
    
  </script>
</body>
</html>

It doesn't matter how I pass endDate through the component. :endDate="2018-09-11" or endDate="2018-09-11" also failed with the same message.

However, when I change the endDate property like this

diff --git a/src/components/CalendarHeatmap.vue b/src/components/CalendarHeatmap.vue
index 18cde00..5460d4e 100644
--- a/src/components/CalendarHeatmap.vue
+++ b/src/components/CalendarHeatmap.vue
@@ -72,7 +72,7 @@ export default {

   props: {
     endDate: {
-      required: true
+      default: new Date()
     },
     max: {
       type: Number

and re-run npm run build:browser, I receive another error message

[Vue warn]: Invalid default value for prop "endDate": Props with type Object/Array must use a factory function to return the default value.

But vue dev tools shows that endDate is a correct date object.

So I've absolutely now idea how to use this component correctly. Any hints?

about import

when i add import VueCalendarHeatmap from 'vue-calendar-heatmap in main.js,
it warn me
can not find module “vue-calendar-heatmap” declare file。“d:/learn-game-ui/ruoyi-ui/node_modules/vue-calendar-heatmap/dist/vue-calendar-heatmap.common.js”隐式拥有 "any" 类型。尝试使用 npm i --save-dev @types/vue-calendar-heatmap(如果存在)，或者添加一个包含declare module 'vue-calendar-heatmap'; 的新声明(.d.ts)文件ts(7016)

Clickable Content

is there any way to call each day on the calendar? I try to use @click but nothing happened in my called function. Please add it onClick props for certain needs