I'm creating a log view screen using fullcalendar and vue3. I want to render buttons in each day cell where we can download the log record of that day.
this is sample design;
I asked a similar question before and
I created a codepen example like this; https://codepen.io/ADyson82/pen/rNrdeJp
but this example doesn't work with vue3. I've been working with this screen for quite a long time and now I can't see what's missing, please enlighten me.
here is my fullcalendar options;
calendarOptions: {
plugins: [dayGridPlugin, interactionPlugin],
initialView: "dayGridMonth",
// dateClick: this.handleDateClick,
headerToolbar: {
start: "",
center: "title",
end: "today,prevYear,prev,next,nextYear",
},
locale: "tr",
events: [
{ title: "event 1", date: "2023-01-01" },
{ title: "event 2", date: "2023-01-02" },
],
dayCellContent: (date) => {
html: `
<div class="day-number-text">${date.dayNumberText}</div>
<div class="btn-group calendar-buttons" style="margin-top:10px;">
<q-btn class="btn btn-info download-btn" #click="eventClick"></q-btn>
<q-btn class="btn btn-info save-btn" v-on:click="handleButtonClick(date,2)"></q-btn>
<q-btn class="btn btn-info share-btn" v-on:click="handleButtonClick(date,3)"></q-btn>
</div>
`,
},
},
The real question is; As I mentioned above, when adding the buttons
to the calendar where I can view or download the daily log records, is
it reasonable to add an onclick event to the buttons using
daycellcontent or use the events and eventClick event already in
fullcalendar?
note: I'm using quasar framework with vue and I'm still a rookie in all these technologies I use.
the latest version of fullcalendar strangely daycellcontent is not working so I downgraded it to v5 and it worked successfully.
Related
I'm using fullcalendar to display a month view which shows the time and title of events (and a popover showing the description when hovered). When I click the event, I show a listday view that shows all the events for that day. That all works fine and I have this working with this code:
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
start: 'dayGridMonth,listDay',
center: 'title',
end: 'prev,next'
},
initialView: 'dayGridMonth',
initialDate: '2023-01-12',
height: 'auto',
dayMaxEvents: 3,
moreLinkClick: 'listDay',
eventClick: function(info){
switchToListView(info)
},
eventColor: 'green',
views: {
listDay: {
displayEventEnd: true
}
},
events: [
{
title: 'All Day Event',
start: '2023-01-01'
},
{
title: 'Meeting',
description: 'My Description',
start: '2023-01-12T10:30:00',
end: '2023-01-12T12:30:00'
},
and in this code pen
I'd like to show the description text for the event in addition to the title in the listday view and I can't figure out how to do this. I don't know whether I need to use an event hook or what. I just can't make my way through the docs and examples to see what to do.
Appreciate any help.
I got this working with this use of eventDidMount.
eventDidMount: function(info) {
info.el.querySelector('.fc-list-event-title a').innerHTML += ` ${info.event.extendedProps.description}`
},
Frankly, it feels a little weird that I need to go into the depths of the rendered HTML to adjust the output instead of changing what is going INTO the generated HTML but I guess that's just how it works (??)
Thanks to #ADyson for the push in the right direction.
How to create custom price line in the tradingview widget? Example; as in the picture below.
i used vue3js and electronjs.
My widget code;
window.tradingView = new window.TradingView.widget({
autosize: true,
symbol: 'BINANCE:' + this.symbolData.symbol,
interval: '15',
timezone: this.local,
theme: 'light',
style: '1',
locale: 'tr',
toolbar_bg: '#f1f3f6',
enable_publishing: false,
save_image: false,
container_id: this.id,
});
You can use the Trading View Online Configurator to conveniently configure the chart to your needs.
For example using the following configuration you get the price line with OHLC information (in Turkish AYDK)
EDIT (after comment): This response assumed the question is about the line with OHLC information. As pointed out by the author in the comment, this is not the case. If OP asked for the horizontal line within the chart, I am afraid this is not officially supported within the JS widget.
From FAQ on TradeView Widget:
I'd like to add a custom pine script to the widget.
It is not possible to add pine scripts to widgets at this time. > > You can publish an idea with your script and embed it.
There might be an unofficial (undocumented) way do it, but I would strongly suggest against relying on it. As always with undocumented features they might stop working at any time. If that is an acceptable risk there are some more ways in addition to SO to contact people that might know about such an option.
Settings
Code
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div id="tradingview_3a5dc"></div>
<div class="tradingview-widget-copyright">TradingView'den <span class="blue-text">SHIBUSDT Grafiği</span></div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"autosize": true,
"symbol": "BINANCE:SHIBUSDT",
"interval": "15",
"timezone": "Etc/UTC",
"theme": "light",
"style": "1",
"locale": "tr",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"save_image": false,
"container_id": "tradingview_3a5dc"
}
);
</script>
</div>
<!-- TradingView Widget END -->
Result
tailwindcss and phoenix liveview.
My code look like this
<div x-data="{isExpaned: false}">
<button #click="isExpanded = !isExpaned">Parent menu</button>
<div x-show="ixExpanded">Sub menu</div>
</div>
And First loaded page, even though isExpanded value is false, it shows sub menu.
and refresh the page also shows submenu.
And I checked that x-data="{isExpanded: false}"
why is it happened?
This problem is not related to tailwindcss nor alpinejs
It relates to Phoenix liveview setup
I need to add this code to work with alpinejs and liveview together in app.js file
let liveSocket = new LiveSocket('/live', Socket, {
dom: {
onBeforeElUpdated(from, to) {
if (from.__x) {
window.Alpine.clone(from.__x, to)
}
}
},
params: {
_csrf_token: csrfToken
},
hooks: Hooks
})
I have a v-for loop where a button is created for each iteration. I'm trying to make a toggle handler where clicking the button will toggle the color of the button. But since the buttons are dynamically created, all of their colors are changing ....
<div class="pets" v-for="pet in pets" :key="pet.id">
<button class="favorite" v-on:click="toggle">
<i v-bind:class="[{ 'red' : favorited }, 'material-icons']">favorite</i>
</button>
</div>
The pets array is being filled with a http call. My script looks like this:
<script>
export default {
name: 'home',
data() {
return {
pets: [],
favorited: false
}
},
methods: {
toggle: function() {
this.favorited = !this.favorited;
}
},
}
The Style tag just changes the color
<style scoped>
.red {
color: red;
}
Essentially, I'm trying to created a favorite button where you can toggle favoriting an object from the array pets. I know why my method would activate all my buttons. Since favorited is not unique to a button and coming from the data. So when favorited = true, the class 'red' is bound to all my buttons. My question is how do I bind the class 'red' to just the button I click on? I'm relatively new to Vue and this is driving me nuts lol! Someone please tell me how I can fix this.
Add a favorited property to your pet objects in the pets array. Then use that property.
<div class="pets" v-for="pet in pets" :key="pet.id">
<button class="favorite" v-on:click="pet.favorited = !pet.favorited">
<i v-bind:class="[{ 'red' : pet.favorited }, 'material-icons']">favorite</i>
</button>
</div>
Example.
If you didn't want to modify the pet object, then here is an alternate way.
There seem to be an issue with the last version of jQueryUI (1.11) when it comes to using several modal dialogs.
What I am trying to achieve is the following: I have two modal dialogs, the first one contains a button which should open the second dialog:
HTML
<div id="test1">
Test 1
<button id="open_test2">Open Test 2</button>
</div>
<div id="test2">
Test 2
</div>
JS
$(function() {
$('#test1').dialog({
autoOpen: true,
modal: true
});
$('#test2').dialog({
autoOpen: false,
modal: true,
position: {
my: "right top", at: "right top", of: window
}
});
$('#open_test2').click(function() {
$('#test2').dialog('open');
});
})
Once the second dialog is opened, I am still able to click on the first dialog !
Here is a link to a fiddle that shows what I am trying to achieve:
http://jsfiddle.net/JC4t5/1/
Thanks a lot in advance for your help !
This has been fixed with the jQuery UI 1.11.2 release.