{"id":3004,"date":"2021-03-29T10:00:00","date_gmt":"2021-03-29T14:00:00","guid":{"rendered":"https:\/\/www.mymiller.name\/wordpress\/?p=3004"},"modified":"2021-03-28T08:05:41","modified_gmt":"2021-03-28T12:05:41","slug":"angular-material-calendar","status":"publish","type":"post","link":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-material-calendar\/","title":{"rendered":"Angular Material Calendar"},"content":{"rendered":"\n

Sometimes you need to have a calendar for showing information in your web application. After looking around at different implementations and finding none that work. I decided to create my own. This Calendar is not mobile optimized, For that, I created an Agenda that shows a single day at a time, and used my *onSize<\/a> directive to switch between the two when needed.<\/p>\n\n\n\n

So to begin with I create a DTO to represent the data, of the event.<\/p>\n\n\n\n

export class EventData {\r\n    id: number;\r\n    title: string;\r\n    desc: string;\r\n    startDate: Date;\r\n    endDate: Date;\r\n    createdBy: string;\r\n    createdAt: Date;\r\n    type: string;\r\n    color: string;\r\n}<\/code><\/pre>\n\n\n\n
Now to use internally for each day, a new DTO to represent the day, and the events that occur on that day.  <\/p>\n\n\n\n
import {EventData} from \".\/event-data.dto\";\r\n\r\nexport class EventDay {\r\r\n    date: number;\r\n    month: number;\r\n    year: number;\r\r\n    events: EventData[];\r\n}<\/code><\/pre>\n\n\n\n
Now the next thing was to create a component that would show the individual day on the calendar.  For that I created the <app-calendar-control-day>.  It has one input, eventDay that takes an EventDay from above.  <\/p>\n\n\n\n
import {Component, Input, OnInit} from '@angular\/core';\r\nimport {EventDay} from \"..\/..\/dto\/calendar\/event-day.dto\";\r\nimport {EventData} from \"..\/..\/dto\/calendar\/event-data.dto\";\r\n\r\n@Component({\r\n  selector: 'app-calendar-control-day',\r\n  templateUrl: '.\/calendar-day.component.html',\r\n  styleUrls: ['.\/calendar-day.component.scss']\r\n})\r\nexport class CalendarDayComponent implements OnInit {\r\n  set eventDay(value: EventDay) {\r\n    this._eventDay = value;\r\n    this.checkIfToday();\r\n  }\r\n\r\n  @Input('eventDay') private _eventDay:EventDay;\r\n\r\n  isToday:boolean = false;\r\n\r\n  constructor() { }\r\n\r\n  ngOnInit(): void {\r\n    this.checkIfToday();\r\n  }\r\n\r\n  checkIfToday(){\r\n    let today = new Date();\r\n    if( today.getFullYear() == this._eventDay.year\r\n        && today.getMonth() == this._eventDay.month\r\n        && today.getDate() == this._eventDay.date) {\r\n      this.isToday = true;\r\n    } else {\r\n      this.isToday = false;\r\n    }\r\n  }\r\n}\r<\/code><\/pre>\n\n\n\n
Here is the HTML for this component.<\/p>\n\n\n\n
<table class=\"day-table\">\r\n\t<tbody>\r\n\t<tr>\r\n\t\t<td>\r\n\t\t\t<span (click)=\"viewDayAgenda(_eventDay)\" class=\"apply-pointer\" [class.today]=\"isToday\">{{_eventDay.date}}<\/span>\r\n\t\t<\/td>\r\n\t<\/tr>\r\n\t<tr *ngFor=\"let event of _eventDay.events\" style=\"background-color:{{event.color}}\"  class=\"apply-pointer \" (click)=\"viewEvent(event)\">\r\n\t\t<td class=\"day-row\">\r\n\t\t\t{{event.startDate | date:'hh:mm a'}} {{event.title}}\r\n\t\t<\/td>\r\n\t<\/tr>\r\n\t<\/tbody>\r\n<\/table><\/code><\/pre>\n\n\n\n
And the SCSS that goes along with it.<\/p>\n\n\n\n
.day-table {\r\n  width: 100%;\r\n}\r\n\r\n.day-row {\r\n  border: solid 1px;\r\n  border-radius: 5px;\r\n}\r\n\r\n.today {\r\n  color:  red;\r\n}\r<\/code><\/pre>\n\n\n\n
Now that let’s get tot he main component of this.  This lays out the creates the EventDay’s data to display.  <\/p>\n\n\n\n
import {AfterViewInit, Component, EventEmitter, HostListener, Input, OnChanges, OnInit, Output} from '@angular\/core';\r\nimport {animate, style, transition, trigger} from '@angular\/animations';\r\nimport {EventData} from \"..\/..\/dto\/calendar\/event-data.dto\";\r\nimport {EventDay} from \"..\/..\/dto\/calendar\/event-day.dto\";\r\nimport {CalendarService} from \"..\/..\/services\/calendar.service\";\r\n\r\n@Component({\r\n    selector: 'app-calendar-control',\r\n    templateUrl: '.\/calendar.component.html',\r\n    styleUrls: ['.\/calendar.component.scss']\r\n})\r\nexport class CalendarComponent {\r\n    set startDate(value: Date) {\r\n        this._startDate = value;\r\n\r\n        this.showYear = this._startDate.getFullYear();\r\n        this.showMonth = this._startDate.getMonth();\r\n\r\n        this.lookupEventData();\r\n        this.buildDays();\r\n    }\r\n    set startYear(value: number) {\r\n        this._startYear = value;\r\n\r\n        this.years = [];\r\n\r\n        for(let i = this._startDate.getFullYear() + 1 ; i > this._startYear; i-- ) {\r\n            this.years.push(i);\r\n        }\r\n    }\r\n    @Input() dataSource: EventData[] = [];\r\n    _startDate: Date = new Date();\r\n\r\n    _startYear:number = 1900;\r\n\r\n    years:number[] = [];\r\n    showYear: number;\r\n    showMonth: number;\r\n    days:EventDay[] = [];\r\n    events:EventData[] = [];\r\n\r\n    constructor(private calendarService:CalendarService) {\r\n        this.showYear = this._startDate.getFullYear();\r\n        this.showMonth = this._startDate.getMonth();\r\n        for(let i = this._startDate.getFullYear() + 1 ; i > this._startYear; i-- ) {\r\n            this.years.push(i);\r\n        }\r\n\r\n        this.lookupEventData();\r\n        this.buildDays();\r\n    }\r\n\r\n    previousMonth() {\r\n        let lastDayOfPreviousMonth = new Date(this.showYear,this.showMonth,0);\r\n        this.showYear = lastDayOfPreviousMonth.getFullYear();\r\n        this.showMonth = lastDayOfPreviousMonth.getMonth();\r\n\r\n        this.lookupEventData();\r\n        this.buildDays();\r\n    }\r\n\r\n    nextMonth() {\r\n        let firstDayOfNextMonth = new Date(this.showYear,this.showMonth + 1, 1);\r\n        this.showYear = firstDayOfNextMonth.getFullYear();\r\n        this.showMonth = firstDayOfNextMonth.getMonth();\r\n\r\n        this.lookupEventData();\r\n\r\n        this.buildDays();\r\n    }\r\n\r\n    today() {\r\n        let today = new Date();\r\n        this.showYear = today.getFullYear();\r\n        this.showMonth = today.getMonth();\r\n\r\n        this.lookupEventData();\r\n\r\n        this.buildDays();\r\n    }\r\n\r\n    buildDays() {\r\n        this.days = [];\r\n        let firstDayOfCurrentMonth = new Date(this.showYear,this.showMonth,1);\r\n        let lastDayOfPreviousMonth = new Date(this.showYear,this.showMonth,0);\r\n        let lastDayOfCurrentMonth = new Date(this.showYear,this.showMonth+1,0);\r\n        let firstDayOfNextMonth = new Date(this.showYear,this.showMonth + 1, 1);\r\n\r\n        let firstDayPos = firstDayOfCurrentMonth.getDay();\r\n        let lastDayPos = lastDayOfCurrentMonth.getDay();\r\n\r\n\r\n        if(firstDayPos != 0) {\r\n            let lastMonthDay = lastDayOfPreviousMonth;\r\n            for(let i = firstDayPos - 1; i >= 0; i--) {\r\n                let day = new EventDay();\r\n                day.year = lastMonthDay.getFullYear();\r\n                day.month = lastMonthDay.getMonth();\r\n                day.date = lastMonthDay.getDate();\r\n\r\n                day.events = this.getEventsByDay(day.year,day.month,day.date);\r\n\r\n                lastMonthDay = new Date(lastMonthDay.getFullYear(),lastMonthDay.getMonth(),lastMonthDay.getDate()-1);\r\n                this.days.unshift(day);\r\n            }\r\n        }\r\n        for(let i = 1; i <= lastDayOfCurrentMonth.getDate(); i++) {\r\n            let day = new EventDay();\r\n            day.year = lastDayOfCurrentMonth.getFullYear();\r\n            day.month = lastDayOfCurrentMonth.getMonth();\r\n            day.date = i;\r\n\r\n            day.events = this.getEventsByDay(day.year,day.month,day.date);\r\n\r\n            this.days.push(day);\r\n        }\r\n        if(lastDayPos != 6) {\r\n            for(let i = lastDayPos + 1; i <= 6; i++) {\r\n                let day = new EventDay();\r\n                day.year = firstDayOfNextMonth.getFullYear();\r\n                day.month = firstDayOfNextMonth.getMonth();\r\n                day.date = i - lastDayPos;\r\n\r\n                day.events = this.getEventsByDay(day.year,day.month,day.date);\r\n\r\n                this.days.push(day);\r\n            }\r\n        }\r\n    }\r\n\r\n    getEventsByDay(year:number, month:number,date:number):EventData[] {\r\n        return this.events.filter(event => {\r\n            event.startDate = new Date(event.startDate);\r\n            event.endDate = new Date(event.endDate);\r\n            return true;\r\n        }).filter( event => {\r\n            return event.startDate.getFullYear() == year;\r\n        }).filter(event => {\r\n            return event.startDate.getMonth() == month;\r\n        }).filter(event => {\r\n            return event.startDate.getDate() == date;\r\n        }).sort((a,b) => {\r\n            return a.startDate.getTime() - b.startDate.getTime();\r\n        })\r\n    }\r\n\r\n    lookupEventData() {\r\n        let firstDayOfPreviousMonth = new Date(this.showYear,this.showMonth - 1,1);\r\n        let lastDayOfNextMonth = new Date(this.showYear,this.showMonth + 2,0);\r\n\r\n        this.calendarService.getEventData(firstDayOfPreviousMonth,lastDayOfNextMonth).subscribe(events => {\r\n            this.events = events;\r\n            this.buildDays();\r\n        })\r\n    }\r\n}\r\n<\/code><\/pre>\n\n\n\n
So a quick break down on this code.  It has 2 inputs [startYear], and  [startDate] startYear indicates what year the calendar should allow going back, by default I limit it to 1900 and up to one year in advance.  startDate indicates a Javascript Date to show on initial load, by default it goes to today.  <\/p>\n\n\n\n
Methods previousMonth(), nextMonth(), and today() used to move the calendar displayed.  These simply jump us in our dates views to the new date.  <\/p>\n\n\n\n
Then buildDays(), this calculates the dates that need to be shown on the calendar for a month. It shows the last days of the previous month and the first few days of the next month as needed to complete the calendar.  Javascript Date object does the heavy lifting here.<\/p>\n\n\n\n
Next to get the events for a day we have getEventsByDay() a filter that goes through all the of the events and pulls out the events that occur on specific date.<\/p>\n\n\n\n
Finally lookupEventData() used to load additional data from the API for a given date range.  By requesting the a 3 month range at a time, we can switch to previous\/next month and show the calendar correctly while we load additional data.<\/p>\n\n\n\n
<mat-card>\r\n\t<mat-grid-list cols=\"14\" rowHeight=\"2:1\">\r\n\t\t<mat-grid-tile><mat-icon (click)=\"previousMonth()\" class=\"apply-pointer\" matTooltip=\"{{'Previous Month' | translate}}\">arrow_back_ios<\/mat-icon><\/mat-grid-tile>\r\n\t\t<mat-grid-tile colspan=\"12\">\r\n\t\t\t<mat-form-field class=\"date-selector\">\r\n\t\t\t\t<mat-select [(ngModel)]=\"showMonth\" (selectionChange)=\"buildDays()\">\r\n\t\t\t\t\t<mat-option [value]=\"0\">{{'January' | translate }}<\/mat-option>\r\n\t\t\t\t\t<mat-option [value]=\"1\">{{'February' | translate }}<\/mat-option>\r\n\t\t\t\t\t<mat-option [value]=\"2\">{{'March' | translate }}<\/mat-option>\r\n\t\t\t\t\t<mat-option [value]=\"3\">{{'April' | translate }}<\/mat-option>\r\n\t\t\t\t\t<mat-option [value]=\"4\">{{'May' | translate }}<\/mat-option>\r\n\t\t\t\t\t<mat-option [value]=\"5\">{{'June' | translate }}<\/mat-option>\r\n\t\t\t\t\t<mat-option [value]=\"6\">{{'July' | translate }}<\/mat-option>\r\n\t\t\t\t\t<mat-option [value]=\"7\">{{'August' | translate }}<\/mat-option>\r\n\t\t\t\t\t<mat-option [value]=\"8\">{{'September' | translate }}<\/mat-option>\r\n\t\t\t\t\t<mat-option [value]=\"9\">{{'October' | translate }}<\/mat-option>\r\n\t\t\t\t\t<mat-option [value]=\"10\">{{'November' | translate }}<\/mat-option>\r\n\t\t\t\t\t<mat-option [value]=\"11\">{{'December' | translate }}<\/mat-option>\r\n\t\t\t\t<\/mat-select>\r\n\t\t\t<\/mat-form-field>\r\n\t\t\t<mat-form-field class=\"date-selector\">\r\n\t\t\t\t<mat-select [(ngModel)]=\"showYear\" (selectionChange)=\"buildDays()\">\r\n\t\t\t\t\t<mat-option *ngFor=\"let y of years\" [value]=\"y\" >{{ y }}\r\n\t\t\t\t\t<\/mat-option>\r\n\t\t\t\t<\/mat-select>\r\n\t\t\t<\/mat-form-field>\r\n\t\t\t<mat-icon (click)=\"today()\" class=\"apply-pointer\" matTooltip=\"{{'Today' | translate }}\" >calendar_today<\/mat-icon>\r\n\t\t<\/mat-grid-tile>\r\n\t\t<mat-grid-tile><mat-icon (click)=\"nextMonth()\" class=\"apply-pointer\" matTooltip=\"{{'Next Month' | translate}}\">arrow_forward_ios<\/mat-icon><\/mat-grid-tile>\r\n\t<\/mat-grid-list>\r\n\t<mat-grid-list cols=\"7\" rowHeight=\"4:1\" >\r\n\t\t<mat-grid-tile class=\"calendar-border\">{{'Sunday'|translate}}<\/mat-grid-tile>\r\n\t\t<mat-grid-tile class=\"calendar-border\">{{'Monday'|translate}}<\/mat-grid-tile>\r\n\t\t<mat-grid-tile class=\"calendar-border\">{{'Tuesday'|translate}}<\/mat-grid-tile>\r\n\t\t<mat-grid-tile class=\"calendar-border\">{{'Wednesday'|translate}}<\/mat-grid-tile>\r\n\t\t<mat-grid-tile class=\"calendar-border\">{{'Thursday'|translate}}<\/mat-grid-tile>\r\n\t\t<mat-grid-tile class=\"calendar-border\">{{'Friday'|translate}}<\/mat-grid-tile>\r\n\t\t<mat-grid-tile class=\"calendar-border\">{{'Saturday'|translate}}<\/mat-grid-tile>\r\n\t\t<mat-grid-tile class=\"calendar-border\" rowspan=\"3\" *ngFor=\"let day of days\"><app-calendar-control-day class=\"calendar-day\" [eventDay]=\"day\"><\/app-calendar-control-day> <\/mat-grid-tile>\r\n\t<\/mat-grid-list>\r\n<\/mat-card>\r\n<\/code><\/pre>\n\n\n\n
Now to show the template for the Calendar component I keep it simple, using a mat-grid-list to display the calendar, and ngx-translate to translate the month and weekday names.  <\/p>\n\n\n\n
.date-selector {\r\n  margin: 5px;\r\n}\r\n\r\n.calendar-border {\r\n  border: solid 1px $accent;\r\n}\r\n\r\n.calendar-day {\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n<\/code><\/pre>\n\n\n\n
Finally the SCSS for the component. <\/p>\n\n\n\n
So what do you get after all of this?  See below.  Style it however you want.  I have some enhancements that I plan to make and I will post them here when I make them.<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"
Sometimes you need to have a calendar for showing information in your web application. After looking around at different implementations and finding none that work. I decided to create my own. This Calendar is not mobile optimized, For that, I created an Agenda that shows a single day at a time, and used my *onSize […]<\/p>\n","protected":false},"author":1,"featured_media":3006,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[281],"tags":[269,270],"series":[],"class_list":["post-3004","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular","tag-material"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/03\/january-2290045_640.jpg?fit=640%2C396&ssl=1","jetpack-related-posts":[{"id":2951,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-material-search-field\/","url_meta":{"origin":3004,"position":0},"title":"Angular Material Search Field","author":"Jeffery Miller","date":"January 25, 2021","format":false,"excerpt":"Angular Material Search Field component using mat-form-field to create a reusable component for searching.","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/www.mymiller.name\/wordpress\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/search-bar-4999181_640.jpg?fit=640%2C225&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/search-bar-4999181_640.jpg?fit=640%2C225&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/search-bar-4999181_640.jpg?fit=640%2C225&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":2943,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-material-string-component\/","url_meta":{"origin":3004,"position":1},"title":"Angular Material String Component","author":"Jeffery Miller","date":"January 4, 2021","format":false,"excerpt":"Create a compnent for Display\/Edit\/Delete of a string using Angular Material mat-form-field.","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/www.mymiller.name\/wordpress\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/application-1883453_640.jpg?fit=640%2C426&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/application-1883453_640.jpg?fit=640%2C426&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/application-1883453_640.jpg?fit=640%2C426&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":2967,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/translations-in-a-angular-library\/","url_meta":{"origin":3004,"position":2},"title":"Translations in a Angular Library","author":"Jeffery Miller","date":"January 1, 2021","format":false,"excerpt":"Developing a UI library for Angular, I had strings that needed be hardcoded. The question became how do I deal with them. I did not want to embed in ngx-translate into the library. I wanted the user to have the ability to modify the strings as well. So I created\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/www.mymiller.name\/wordpress\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/01\/globe-110775_640.jpg?fit=640%2C341&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/01\/globe-110775_640.jpg?fit=640%2C341&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/01\/globe-110775_640.jpg?fit=640%2C341&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":3012,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-maintenance-alert-system\/","url_meta":{"origin":3004,"position":3},"title":"Angular Maintenance Alert System","author":"Jeffery Miller","date":"April 12, 2021","format":false,"excerpt":"So often we need to schedule maintenance on a system, and we need to be able to stop users from doing things during this time. To that end, here is a system I created. It uses a Spring backend, that is not presented here. Created a method that would contact\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/www.mymiller.name\/wordpress\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/03\/wrench-717684_640.jpg?fit=640%2C426&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/03\/wrench-717684_640.jpg?fit=640%2C426&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/03\/wrench-717684_640.jpg?fit=640%2C426&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":2946,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-material-checkbox\/","url_meta":{"origin":3004,"position":4},"title":"Angular Material Checkbox","author":"Jeffery Miller","date":"January 11, 2021","format":false,"excerpt":"Create a compnent for Display\/Edit of a checkbox using Angular Material mat-form-field.","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/www.mymiller.name\/wordpress\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/checklist-2549229_640.jpg?fit=640%2C426&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/checklist-2549229_640.jpg?fit=640%2C426&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/checklist-2549229_640.jpg?fit=640%2C426&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":2391,"url":"https:\/\/www.mymiller.name\/wordpress\/java_tips\/java-development-tips\/","url_meta":{"origin":3004,"position":5},"title":"Java Development Tips","author":"Jeffery Miller","date":"December 23, 2025","format":false,"excerpt":"Java-based servers or applications often have to deal with large amounts of data.\u00a0 Whether the data is from a database, or from a local file, processing this data in an efficient manner is a priority for maintainability. In this article, we will discuss the types of Java Data Objects and\u2026","rel":"","context":"In "Java Tips"","block_context":{"text":"Java Tips","link":"https:\/\/www.mymiller.name\/wordpress\/category\/java_tips\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2018\/10\/archive-1850170_640.jpg?fit=640%2C426&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2018\/10\/archive-1850170_640.jpg?fit=640%2C426&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2018\/10\/archive-1850170_640.jpg?fit=640%2C426&ssl=1&resize=525%2C300 1.5x"},"classes":[]}],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/posts\/3004","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/comments?post=3004"}],"version-history":[{"count":1,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/posts\/3004\/revisions"}],"predecessor-version":[{"id":3007,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/posts\/3004\/revisions\/3007"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/media\/3006"}],"wp:attachment":[{"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/media?parent=3004"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/categories?post=3004"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/tags?post=3004"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/series?post=3004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}