{"action":"created","issue":{"url":"https://api.github.com/repos/richardtallent/vue-simple-calendar/issues/44","repository_url":"https://api.github.com/repos/richardtallent/vue-simple-calendar","labels_url":"https://api.github.com/repos/richardtallent/vue-simple-calendar/issues/44/labels{/name}","comments_url":"https://api.github.com/repos/richardtallent/vue-simple-calendar/issues/44/comments","events_url":"https://api.github.com/repos/richardtallent/vue-simple-calendar/issues/44/events","html_url":"https://github.com/richardtallent/vue-simple-calendar/issues/44","id":297436293,"number":44,"title":"Custom HTML for event style with slot","user":{"login":"arifhussain353","id":12670763,"avatar_url":"https://avatars3.githubusercontent.com/u/12670763?v=4","gravatar_id":"","url":"https://api.github.com/users/arifhussain353","html_url":"https://github.com/arifhussain353","followers_url":"https://api.github.com/users/arifhussain353/followers","following_url":"https://api.github.com/users/arifhussain353/following{/other_user}","gists_url":"https://api.github.com/users/arifhussain353/gists{/gist_id}","starred_url":"https://api.github.com/users/arifhussain353/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/arifhussain353/subscriptions","organizations_url":"https://api.github.com/users/arifhussain353/orgs","repos_url":"https://api.github.com/users/arifhussain353/repos","events_url":"https://api.github.com/users/arifhussain353/events{/privacy}","received_events_url":"https://api.github.com/users/arifhussain353/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-02-15T12:56:20Z","updated_at":"2018-03-23T04:55:05Z","closed_at":"2018-02-16T02:17:54Z","author_association":"NONE","body":"I want to change event HTML completely as i did in `fullcalendar` library. I used slot for this purpose but all events floated to right side because these classes like `event  offset2 span1 eventRow1` are not added if i use slot. Is there anything i am missing ?\r\n```\r\n  <calendar-view   :events=\"events\"\r\n                               :startingDayOfWeek=\"parseInt(changeCalendarStartDay)\"\r\n                                :displayPeriodUom=\"changeCalendarView\"\r\n                                 :show-date=\"showDate\"\r\n                                  @setShowDate=\"setShowDate\"\r\n                                   class=\"holiday-us-traditional holiday-us-official\">\r\n                               <template slot=\"event\" slot-scope=\"props\" >\r\n                                  <div>\r\n                                       {{ props.event.title }}\r\n                                   </div>\r\n                               </template>\r\n                           </calendar-view>\r\n```\r\nEvent array is look like this : \r\n```\r\n events:[\r\n                    {\r\n                        startDate:'2018-02-08',\r\n                        title:'Event1',\r\n                        classes:'testing'\r\n                    },\r\n                    {\r\n                        startDate:'2018-02-07',\r\n                        title:'Event2'\r\n                    },\r\n                    {\r\n                        startDate:'2018-02-09',\r\n                        title:'Event3'\r\n                    },\r\n\r\n                ]\r\n```\r\nI got result like this below : \r\n![image](https://user-images.githubusercontent.com/12670763/36257496-efb4832c-1278-11e8-8b46-cc5686161d8c.png)\r\n\r\n\r\nWhat i exactly want is to modify event HTML according to my need. Below example image of my current `fullcalendar` library preview.\r\n![image](https://user-images.githubusercontent.com/12670763/36257376-73ad1b0e-1278-11e8-85e5-ec52110638f3.png)\r\n"},"comment":{"url":"https://api.github.com/repos/richardtallent/vue-simple-calendar/issues/comments/375544974","html_url":"https://github.com/richardtallent/vue-simple-calendar/issues/44#issuecomment-375544974","issue_url":"https://api.github.com/repos/richardtallent/vue-simple-calendar/issues/44","id":375544974,"user":{"login":"richardtallent","id":2041718,"avatar_url":"https://avatars2.githubusercontent.com/u/2041718?v=4","gravatar_id":"","url":"https://api.github.com/users/richardtallent","html_url":"https://github.com/richardtallent","followers_url":"https://api.github.com/users/richardtallent/followers","following_url":"https://api.github.com/users/richardtallent/following{/other_user}","gists_url":"https://api.github.com/users/richardtallent/gists{/gist_id}","starred_url":"https://api.github.com/users/richardtallent/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/richardtallent/subscriptions","organizations_url":"https://api.github.com/users/richardtallent/orgs","repos_url":"https://api.github.com/users/richardtallent/repos","events_url":"https://api.github.com/users/richardtallent/events{/privacy}","received_events_url":"https://api.github.com/users/richardtallent/received_events","type":"User","site_admin":false},"created_at":"2018-03-23T04:55:05Z","updated_at":"2018-03-23T04:55:05Z","author_association":"OWNER","body":"Ah! I believe what you're seeing is a Vue issue, not something specific to this component. In Vue, the `{{handlebar}}` syntax is only for plain text -- any HTML markup returned by the expression will be escaped. To dynamically render HTML from an expression, you'd need to use the `v-html` attribute. Something like this:\r\n\r\n```HTML\r\n<div slot=\"event\" slot-scope=\"props\"\r\n        :class=\"props.event.classes\"\r\n        :key=\"props.event.id\"\r\n        v-html=\"props.event.title\"/>\r\n```\r\n\r\n(Use `</div>` instead of `/>` if you're not using an SFC.)\r\n\r\nAlso, note that the `div` should have a `class` attribute, not `classes`. The event attribute storing the list of classes is called `classes`. When you set up your event, be sure to set `classes` to either a string with a single class, or an array if you are assigning multiple classes.\r\n\r\nNice looking calendar, BTW!"}}
{"actor":{"display_login":"richardtallent"}}