I have an schedule from primeNg on my page, like this:
<p-schedule #schedule [defaultDate]="dataSelecionada"[defaultView]="'month'" [header]="schedulerHeader" [events]="events" ></p-schedule>
The events are showing correctly, but when de time is rounded, like 10:00 or 11:00, the schedule dont display the minutes part (display like this 10), but I want to display it.
I tried to use moment.js to send a formated date to schedule but doesn't work, the schedule don't display anything.
What i tried so far :
moment(evento.dataAgendamento).format('DD/MM/YYYY HH:mm');
and if a pass only moment(evento.dataAgendamento) i have the same inital behavior, the minutes don't show
the evento.dataAgendamento property is returning like 2018-07-09 08:00:00, but on schedule only show 08.
If some could help me i would really appreciate, Thanks.
I don't find a way to customize the timeFormat using schedule, and this is what i did :
use these CSS to hide the time part of the calendar:
:host >>> .fc-time { display: none; }
:host >>> .fc-axis.fc-time { display: table-cell; }
and then I put the time before te tittle:
this.events = agenda.map(evento => {
return {
'title':moment(evento.dataAgendamento).format('HH:mm') + ' ' + evento.agendaGrupo.nome
'start': evento.dataAgendamento,
};
});
This for sure isn't the best solution but it works for me.
Related
I am trying to create a comparison graph like the one below which will show the data of the current day vs the present day minus 7 days (or 20 days or 90 days, ...).
I am using highcharts and highchart's react wrapper for this and I've created a multi line graph using the following data:
series: [
{
name: "Weekly",
data: [
24916, 37941, 29742, 29851, 32490, 30282, 38121, 36885, 33726, 34243,
31050,
],
},
{
name: "Weekly Last Week",
data: [
11744, 30000, 16005, 19771, 20185, 24377, 32147, 30912, 29243, 29213,
25663,
],
dashStyle: "ShortDash",
},
]
I am able to create the same solid and dashed line effect. The only issue I am facing is how to show the tooltip (as shown in the image below) with the current date vs last date data and their comparison. I used this tooltip option:
tooltip: {
enabled: true,
shared: true,
formatter: function () {
return this.points.reduce(function (s, point) {
return s + "<br/>" + point.series.name + ": " + point.y + "m";
}, "<b>" + this.x + "</b>");
},
},
I was able to recreate it based on the design requirement we had. Here is the link to the codesandbox (minus the proper design for tooltips and legends) for anyone looking for it in the future.
The tooltip's functionality was achieved by adding the formatter function in the tooltip option (found in the chartOptions.js file in the sandbox). It's a hacky code but it is needed to calculate the percentage change between the current day's data vs last week's (present-day minus 7 days) data. In my current case, all data is restricted to 7 days for the time being.
For creating the legend which shows the same percent change data I need to add an empty series in the series data (found in the chartOptions.js file) which will store the calculated value of the percent change of the last day (basically the last value in the array).
If anyone has a better solution for consuming data inside the formatter function of the tooltip or legends then please add it to the answer to this question.
does colorfield have bugs in rtl?
If yes, is there an alternative?
Because after using this field, the shape of the page will be messed up and you can see the photo enter image description here
I just used its X-type exactly like the examples in the document itself
xtype:'colorfield',
value: '#993300', // initial selected color
listeners : {
change: function(field, color) {
console.log('New color: ' + color);
}
},
If anyone has ever encountered this problem and was able to solve it, thank you for guiding me.
I'm convinced I'm overthinking this and ending up in a loop of not being able to solve this issue. The short of it is I have an array which includes dates which I am displaying in a list in my main view. The entries will fire notifications to users based on the time of the date.
I want to be able to remove entries from the Array or View where the date is older than the current date and only show users the up to date entries. Almost everything I've found online doesn't seem to apply to this and I'm going round in circles trying to resolve this.
Theres a lot to unpack with my code so I've condensed it down.
struct EventListView: View {
var body: some View {
NavigationView {
//Loads the array from a CSV - no issues with this, been working with it for
all other functions in the app.
var events = loadCSV(from: "Eventtest")
List(events, id: \.id) { event in
//This function returns a true/false bool which I want to use to remove
from view/array
let eventinpast = dateInPast(value: event.date)
HStack{
VStack(alignment: .leading, spacing: 5){
Text(event.name)
.font(.subheadline)
.foregroundColor(.secondary)
Text(event.event) //confusing but this is correct.
.font(.subheadline)
.foregroundColor(.secondary)
Text(event.date)
Text(event.time)
}.frame(width: 200.0, alignment: .topLeading)
}
}
}
}
}
I've tried to change the List to include a "ForEach" but this doesn't resolve the issue as everything I've found online for this revolves around a user action to delete/remove, but I want the bool to decide if the event item is displayed/deleted or not.
I've removed my attempts for trying to delete/remove items because at this point I'm tripping myself up constantly and I'm not convinced I'm looking at the problem from the right perspective.
Most recent attempt has been following this: https://www.hackingwithswift.com/books/ios-swiftui/building-a-list-we-can-delete-from
But instead of using .onDelete I tried .onAppear but no deals. Sorry if proposing this problem is rambling, I'm quite drained from trying to get what I thought would be really simple functionality working.
Any help would be greatly appreciated! Thank you.
Sometimes it is better to do the model stuff first.
var events = loadCSV(from: "Eventtest")
events = events.filter() { !dateInPast(value: $0.date) }
how about SHOWING only the relevant events:
var events = loadCSV(from: "Eventtest").filter { !dateInPast(value: $0.date) }
or
List(events.filter { !dateInPast(value: $0.date) }, id: \.id) { event in
Thanks so much #dtm & #ChrisR!
I knew I was overthinking what I was trying to do. I've ended up with this.
var events = loadCSV(from: "Eventtest")
var events = events.filter { !dateInPast(value: $0.date) }
There are some other date eval's in scope for the view but that can be moved into the loadCSV function or dateInPast, tidies it up a bit too. Unfortunately I can't upvote since my account is new. Thanks so much though. Cheers!
I cannot interact with the date picker (popup) in my Cypress tests.
I tried .find() and .get() on every div class but each time it says
Timed out retrying after 4000ms: Expected to find element: .cdk-overlay-container, but never found it
This is my test code:
cy.get('#signup-step-pers-details').within(() => {
cy.get('[name="firstName"]').type(user.firstName)
.get('[name="surname"]').type(user.lastName)
.get('#select-gender').click()
.get('.ng-dropdown-panel-items').contains(user.gender, {matchCase: false}).click()
.get('#input-dateOfBirth').click()
.find('.owl-dt-popup').click()
.get('.owl-calendar-year').contains(2002).click()
I tried adding some wait time but that didn't help either.
#KKhan is correct, the Angular Date Time Picker opens in a cdk-overlay-container at the foot of the document.
More detail on the layout:
<body>
...
<div id="signup-step-pers-details>
...
<div id="input-dateOfBirth"></div>
</div>
...
<div class="cdk-overlay-container">
<owl-date-time-container>
...
</owl-date-time-container>
</div>
</body>
Using cy.get('#signup-step-pers-details').within(() => { restricts commands inside to that section of the DOM, but the owl-date-time-container is outside of that.
You can use this approach Cypress how to temporarily escape from a cy.within()
cy.get('#signup-step-pers-details').within(() => {
// cy.root() === #signup-step-pers-details
cy.get('[name="firstName"]').type(user.firstName)
.get('[name="surname"]').type(user.lastName)
.get('#select-gender').click()
.get('.ng-dropdown-panel-items').contains(user.gender, {matchCase: false}).click()
.get('#input-dateOfBirth').click()
// shift cy.root() to date-time-picker
cy.document().its('body').find('owl-date-time-container').within(() => {
cy.get('button.owl-dt-control-period-button').click()
cy.contains('2002').click()
cy.contains('Aug').click()
cy.contains('23').click()
})
// back to cy.root() === #signup-step-pers-details
cy.get('#select-nationality').click()
})
Note I've used .owl-dt-control-period-button which is correct for the current version of Angular Date Time Picker, but perhaps you have an older version that requires .owl-calendar-year.
This sequence
.get('#input-dateOfBirth').click()
.find('.owl-dt-popup').click()
is expecting to find the date popup within the dateOfBirth control.
You may simply need
.get('#input-dateOfBirth').click()
.get('.owl-dt-popup').click()
Generally you see cy.get() for each item, not chaining all the gets as you have done. That still works because .get() always starts it's search at cy.root(), which is set to #signup-step-pers-details by the .within().
But the .find() is different, it starts it's search at the previous subject, which is the DOB control.
I should add, in case you were expecting the date popup to actually be inside the DOB input, that cdk-overlay-container is added when the popup is made visible, at the bottom of the <body></body> tag (take a look in devtools).
<div class="cdk-overlay-container">...</div>
</body>
Your approach of using contains is good but there is another syntax you may use for the purpose of selecting a date:
cy.get('#signup-step-pers-details').within(() => {
cy.get('[name="firstName"]').type(user.firstName)
.get('[name="surname"]').type(user.lastName)
.get('#select-gender').click()
.get('.ng-dropdown-panel-items').contains(user.gender, {matchCase: false}).click()
.get('#input-dateOfBirth').click()
.find('.owl-dt-popup').click()
.contains('.owl-calendar-year', '2002').click()
I have simple chart with x-axis lables and tooltips,
the date of the months on the tooltips are correct while the months on the x-axis labels is one month behind.
when i change the time zone from GMT+2 US East to UTC-5 the issue resolved.
i also added the following global options useUTC, but it has no affect.
you can see the GMT+2 results in JSFiddle, when you change your timezone, to utc it will resolved.
Highcharts.setOptions({
global: {
useUTC: true
}
});
Any help will be appreciated. (http://jsfiddle.net/liad/uVZ4Z/)
I use highcharts, angularjs and highcharts-ng.
I added the following options (it works for me):
Highcharts.setOptions({
global : {
useUTC : true,
timezoneOffset: -2 * 60 //GMT +2
}
});
Honestly, I don't know how to set global options in highcharts-ng. Is that enough:
$scope.chartConfig = {
global: {
useUTC: true
},
Anyway, I'm in UTC+2h and I see chart properly, Apr for first column (and the same in a tooltip).
It seems this option is not developed at this moment. So have to use Highcharts object directly.
For example, put that code in any of your Angular's config section:
Highcharts.setOptions({
global: {
useUTC: true
}
});